jQuery load() 事件未触发的 IE9 问题

Question

我正在尝试预加载几张图片，并希望我的页面暂停，直到所有图片都加载完毕。所以我正在做的是：

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

});

这在所有浏览器中都可以正常工作，除了（你猜对了）IE。不知何故，Internet Explorer 会下载所有图片（我可以看到它们正在加载到开发工具中），但只会随机触发 load-Event（每次刷新都会给我一个新数字，通常它会计数到大约一半的图像。我尝试了不同版本的 jQuery（我最初是从 1.6.1 开始的）并且还在这个网站上阅读过类似的问题，但还没有找到任何答案。

此外，它似乎不是与缓存相关的问题，因为破坏它（或将随机查询字符串附加到图像源）没有任何区别。

Answer 1

从 jQuery 1.8 开始，$.load() 已被弃用 (http://bugs.jquery.com/ticket/11733)，取而代之的是：

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

puchu的评论也很有趣。但是 $.browser 已被弃用并使用 UA 嗅探。这个 sn-p 应该可以解决问题：https://gist.github.com/527683（参见Javascript IE detection, why not use simple conditional comments?）。

编辑：这个错误在 IE 10 中仍然存在。此外，我链接的 gist sn-p 也没有检测到 IE 10，但是那里有 cmets 可以解决问题。

Answer 2

不要像许多人建议的那样创建动态源，您所要做的就是在绑定加载事件后应用源...

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

Answer 3

+回答：不要在firefox 3.6中运行：

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

部分图片无法加载！我更喜欢：

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

Answer 4

尝试重新分配图像源以触发事件：

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