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:

Clear the modal dialog on the page (which is hidden) of the image previously in it (if any)
Request the page of /url/ajax/some-image/
Open the modal dialog with a spinner showing
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:

Clear the modal dialog of the image previously in it
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)
Open the modal dialog with a spinner showing
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/>?

Henrik Joreteg · Accepted Answer · 2009-12-10 23:57:07Z

6

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.

answered Dec 10, 2009 at 23:57

Henrik Joreteg

1,74616 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zack Over a year ago

Right, I'm just trying to cut down on the number of requests made to the server. When I do the method I have up there at the beginning, it makes a GET for the page with the HTML, then it makes another GET for the image. What I want to do is make it only make the 2nd GET and inject that into the DOM... I just don't know how to do that

Henrik Joreteg Over a year ago

If you're pulling in an image as well as new dynamic html then you're gonna be making two requests there's no way around it that I know of. Why are you worried about making two requests that's not a lot for a page. The only other way is to load all the potentially dynamic code into hidden divs as part of your initial page request and then write in the "src" value of the image tag dynamically... but if so your first request will be much bigger. Don't sweat your number of requests (especially if it's only 2). Odds are you'd be better off optmizing your images if load time is an issue.

Zack Over a year ago

Well, it's not really an issue, I'm just trying to make sure I'm not doing anything wrong. Thanks for your response :)

prodigitalson · Accepted Answer · 2009-12-10 23:08:27Z

2

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);
  };
});

answered Dec 10, 2009 at 23:08

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

2 Comments

Zack Over a year ago

That's how it's working right now, the tag is returned by the GET function; what I'm looking to do, though, is to return the image data itself (literally GET the image file, versus getting a tag for the image). Sorry if that wasn't clear in the question :s

Zack Over a year ago

Thanks for this bit of code, really helped me understand how the $.get function works.

Collectives™ on Stack Overflow

Most efficient way to GET images using jQuery AJAX

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related