Changing <img src="XXX" />, js event when new image has finished loading?

Answer 1

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

Answer 2

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.com/blog/09/12/preloading-images-jquery-and-javascript

Answer 3

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.