I have a photo gallery web page where a single <img src="XXX" /> element's src is changed (on a click) with JavaScript to show the next image—a poor man's ajax I guess. Works great on faster connections when the new image appears almost immediately. Even if it takes a few seconds to load, every browser I've tested it on keeps the old image in place until the new one is pletely loaded.

It's a little confusing waiting those few seconds on a slow connection, though, and I'm wondering if there's some JavaScript event that fires when the new image is done loading, allowing me to put a little working... animated gif or something up in the meantime.

I know I could use AJAX for real (I'm using jQuery already), but this is such a nice and simple solution. Besides this lag, is there any other reason I should stay away from this approach to changing images?

I have a photo gallery web page where a single <img src="XXX" /> element's src is changed (on a click) with JavaScript to show the next image—a poor man's ajax I guess. Works great on faster connections when the new image appears almost immediately. Even if it takes a few seconds to load, every browser I've tested it on keeps the old image in place until the new one is pletely loaded.

It's a little confusing waiting those few seconds on a slow connection, though, and I'm wondering if there's some JavaScript event that fires when the new image is done loading, allowing me to put a little working... animated gif or something up in the meantime.

I know I could use AJAX for real (I'm using jQuery already), but this is such a nice and simple solution. Besides this lag, is there any other reason I should stay away from this approach to changing images?

• javascript
• html
• jquery
• jquery-events

3 Answers 3

You can set up a handler on the "load" event.

$('img.whatever')
  .load(function() { /* do stuff */ })
  .attr('src', newURL);

Actually I guess you'd want to do this with "live()":

$('img.reloadable').live('load', function() { $(this).show(); });
// ...
$('img#someId').hide().attr('src', newURL);

edit — whoa, where did that year go? Well, it turns out that one problem with that "live" approach I typed in way back when is that the "load" event does not bubble. Now what you can do, however, is leverage the way that "Image" objects (as opposed to <img> DOM elements) behave. Basically, the function that changes the URL can use an "Image" element as the place to keep the handler. The code that changes the actual "src" attribute of the real <img> tag would then also update the "src" of the "Image" object instance. The browser will only really load the image once (assuming cache control is all cool), but the browser will still call the "onload" handler of the "Image":

(function() {
  var imageObj = new Image();

  imageObj.onload = function() {
    // code to run when image loads from server 
  };

  $('#hypotheticalButton').click(function() {
    $('#imgToUpdate').attr('src', newURL);
    imageObj.src = newURL;
  });
})();

You just just preload the images with jQuery so that way when the user clicks, the next image is already loaded and there shouldn't be a delay...that is unless the user goes to your page, and starts clicking on the image before they are loaded.

http://engineeredweb./blog/09/12/preloading-images-jquery-and-javascript

var slideimg = $('#slideimage');
slideimg.click(function(){
    var img = new Image();
    var url = 'url_to_next_image.jpg';
    $(img).bind('load',function(){
        $('#loading').hide();
        slideimg.attr('src',url);
    }).attr('src',url);
    $('#loading').show();
});

This should work even with IE's crazy cache handling.