Cross-browser image onload event handling

Question

In the jQuery docs for the load event http://api.jquery.com/load-event/, it says Can cease to fire for images that already live in the browser\'s cache. Is any

Answer 1

I'm not sure what browsers are affected, but it is easy to check for.

var img = new Image();
img.src = "foo.jpg";
if (img.complete || img.readyState === 4) {
    // image is cached
    doneCallback();
}
else {
    $(img).on('load',doneCallback);
}

UPDATE

If you change the code around, it will consistently fire a load event in all browsers.

var img = new Image();
$(img).load(doneCallback);
img.src = "foo.jpg";