internet explorer 9 - 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"));
});