Question

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

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

});

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

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

Answer 1

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

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

从jQuery 1.8开始，$ .load（）已被弃用（http://bugs.jquery.com/ticket/11733），支持：

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

此外，puchu的评论很有意思。但是，$ .browser已被弃用并使用UA嗅探。这段代码应该可以解决问题：https://gist.github.com/527683（参见Javascript IE detection, why not use simple conditional comments?）。

编辑：这个错误在IE 10中仍然存在。此外，我链接的gist片段也没有检测到IE 10，但是有一些注释可用于解决方法。

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

不要像许多人建议的那样创建动态源，所有你需要做的就是在绑定load事件之后应用源代码......

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

IE9问题jQuery load（）事件没有触发

4 个答案: