jquery callback on image load when changing the src

Question

I'm changing the img src once i've loaded a json file, all this works fine. But I want to make sure the image is completely loaded. Which I can do using:

     .one("load",function(){ 
                alert("image has load yay");
            });

But after reading various posts that not all browsers fire the load if the image is in cache. I don't seem to be getting this problem in the browser that are meant to cause this issue. But i've only test FF(6.0.2), Chrome(13.0.7) and Safari(5.0.5) on a mac. Now i'm sure IE must have a problem and is it only PC related. I'm running pretty recent versions of the browsers so has something changed in these to now fire load. Or my other thought is i'm running the latest version of jquery (1.6.3) has .load been changed?

I'm hoping it's all to do with running the latest jquery, but if not and it's an older browser issue then I need to put in a fix. I've tried a couple of solution on this site for example: jQuery loading images with complete callback And also some of the comments on the .load api page : http://api.jquery.com/load-event/#comment-30211903

But I can't seem to get them to work. The first one doesn't work at all and the second one seems to fall over with the .each().

This is the code i have so far which seems to work ok, but can't be sure as maybe an older browser issues.

$.getJSON(jsonURL, function(json) {         
    $("a.imgZoom img").attr("src", json[imageID].largeImage).one("load",function(){ 
         alert("the image has loaded");
    //do something here
    });
$("a.imgZoom").attr("href", json[imageID].largeImage);
})  

Thanks in advance for any help.

B

Answer 1

Based on some testing I did about a year ago, I found no reliable way to get a load event when changing the .src of an image from one value to another. As such, I had to resort to loading a new image and replacing the one I had with the new one when the new image was loaded. That code has been running successfully in several hundred web sites (it's used by a slideshow) for about a year now so I know it works.

If you set the load handler BEFORE you set the .src property on a new image, you will reliably get the load event. Here's some code I wrote just earlier today for capturing the load event: jQuery: How to check when all images in an array are loaded?.

This code that attaches the event handler BEFORE setting the .src works for me in the modern browsers I've tried it in (I didn't test older browsers):

    $("img").on("load", function() {
        // image loaded here
    }).attr("src", url);

You can see it work here: http://jsfiddle.net/jfriend00/hmP5M/ and you can test any browsers you want using that jsFiddle. Just click on the image to cause it to load a new image. It cycles through three different images (setting .src each time), loading two of them uniquely every time (never from the cache) and one from the cache in order to test both cases. It outputs a message to the screen whenever the .load handler is called so you can see if it's called.