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 =          


        

Answer 1

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.

Answer 2

Do not create a dynamic source as many suggest, all you have to do is apply the source after binding the load event like so...

$("img").load(function() {alert("loaded!"}).attr("src", imgSource);

Answer 3

+to the answer: Do not run this in firefox 3.6:

img.attr("src", img.attr("src"));

Some amount of images will not be loaded! I prefer:

if($.browser.msie && parseInt($.browser.version, 10) >= 9) {
    img_load.attr("src", img_load.attr("src"));
}

Answer 4

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