IE9 problems with jQuery load() event not firing

Question

I am trying to preload a couple of images and would like my page to go on hold until all of the images are loaded. So what I am doing is this:

var numPics = $('#bg img').length;
var picsLoaded = 0;
$('#bg img').load(function(){
    picsLoaded++;
    if (picsLoaded == numPics){
        buildPage();
    }

});

This works fine in all browsers except (you guessed it) IE. Somehow the Internet Explorer will download all pictures (I can see them being loaded in the dev-tools), but will only randomly fire the load-Event (each refresh will give me an new number, usually it will count up to about half of the images. I tried different versions of jQuery (I initially started with 1.6.1) and have also read about problems like this on this site but could not find any answer yet.

Also it does not seem to be a cache related problem as busting it (or appending a random querystring to the image source) did not make a difference.

Answer 1

Try to re-assign the image source in order to trigger the event:

var numPics = $('#bg img').length;
var picsLoaded = 0;
$('#bg img').each(function(index) {
    var img = $(this);
    img.load(function(){
        picsLoaded++;
        if (picsLoaded == numPics){
            buildPage();
        }
    });
    img.attr("src", img.attr("src"));
});

Answer 2

As of jQuery 1.8, $.load() has been deprecated (http://bugs.jquery.com/ticket/11733) in favor of:

image.bind('load', function() {});

Also puchu's comment is interesting. However $.browser has been deprecated and uses UA sniffing. This snippet should do the trick: https://gist.github.com/527683 (see Javascript IE detection, why not use simple conditional comments? ).

EDIT: This bug persists in IE 10. Also the gist snippet I linked too doesn't detect IE 10, but there are comments there for workarounds.