Most efficient way to GET images using jQuery AJAX

Question

Reader's digest version: What is the most efficient way of requesting an image from a server and placing it into the DOM using AJAX (or AJAI, perhaps? : ) )? Here's the long version:

Hello SO, I'm setting up a simple page that has a list of items, and when you click on one, it does the following:

1. Clear the modal dialog on the page (which is hidden) of the image previously in it (if any)
2. Request the page of /url/ajax/some-image/
3. Open the modal dialog with a spinner showing
4. Once the request to the server finishes: inject the HTML from that page into the modal dialog

The page that's requested above searches through a database to find the entry that matches the URL given, and returns an HTML page that says <img src="path/to/image.jpg" alt="Whatever this would be." />. I'm not sure if jQuery is saving me with some magic to make this more efficient, but it seems to me that requesting a page that requests another image is doing more work than needs to be done. What I'm looking for would be something more like this:

1. Clear the modal dialog of the image previously in it
2. Request the image at /url/ajax/some-image/ (I can set this to return the image itself, instead of an <img/> tag for the image)
3. Open the modal dialog with a spinner showing
4. Once the request to the server finishes: inject the image directly into the modal dialog

The problem I'm having is... how? I was looking at $.get, which seems to make the most sense to me for this and I'm just in a bit too far over my head--I'm quite new to JavaScript/jQuery.

I've set the value for the some-image part of the URL to the rel value of the <a> that it corresponds to (to clarify: this is done server-side), so I can build the URL to the image pretty easily within the click() event's function when it's fired, the modal dialog is just div#dialog. Could this be done with something as simple as changing the src of the <img/>?

Answer 1

if youre returning the entire tag from the page:

$('a.modal').click(function(){
  // do your dialog clearing

  // build your url and assign your to var url

  $.get(url, function(data){ 
    $('div#dialog').html(data);
  };
});

Answer 2

Zack, what I think you're missing is that the browser will do the "GET" for you.

When you inject html into your page with JavaScript ... if that code includes an <img> tag the browser will call that source url and retrieve the image for you. You don't have to do another $.get call from your JavaScript to get the image.

So, all you have to do is make sure that the html that is returned from your $.get includes an image tag with the correct url, the browser does the rest.

I hope that helps.