加载图像的jQuery事件

是否可以通过jQuery事件检测何时加载所有图像？

理想情况下,应该有一个

$(document).idle(function()
{
}

要么

$(document).contentLoaded(function()
{
}

但我找不到这样的事情.

我想过附上这样的事件:

$(document).ready(function()
{
    var imageTotal = $('img').length;
    var imageCount = 0;        
    $('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}

但如果图像无法加载,这会破坏吗？在正确的时间调用该方法至关重要.

1> johnpolacek..：

---

根据jQuery的文档,有一些注意事项可以将load事件与图像一起使用.正如另一个答案所述,ahpi.imgload.js插件已损坏,但链接的Paul Irish gist已不再维护.

Per Paul Irish,用于检测图像加载完成事件的规范插件现在位于:

https://github.com/desandro/imagesloaded

---

今天测试了它.在2分钟内启动并运行.

---

这就是答案 - 处理多个图像,缓存图像,浏览器怪癖,破碎图像,以及它是当前的.美丽.

2> 小智..：

---

如果要检查的不是所有图像,而是特定的图像(例如,在DOM已经完成后动态替换的图像),您可以使用:

$('#myImage').attr('src', 'image.jpg').on("load", function() {  
  alert('Image Loaded');  
});  

---

要小心,因为在加载图像时不会触发`load()`.当图像在用户的浏览器缓存中时,这很容易发生.您可以使用`$('#myImage')来检查图像是否已加载.prop('complete')`,在加载图像时返回true.

---

为什么在a)没有回答他的问题并且b)除了给出一个糟糕的解决方案之后,它有这么多的选票？(表示正确的答案是@ johnpolacek's并且有1票)

---

警告!!!!!!!!!!!!!!!这不是正确的答案.johnpolacek有正确的答案.请把他的答案投票.

---

除非在非常特殊的情况下,这些异议似乎不再相关:当您将图像的src更改为与之前完全相同的src时,Webkit.对于刚刚添加到DOM中的图像,$(...).load()就足够了.在当前的FF和Chrome以及IE6-9中进行了测试:http://jsfiddle.net/b9chris/tXVCe/2/

3> alex..：

---

您可以使用我的插件waitForImages来处理这个...

$(document).waitForImages(function() {
   // Loaded.
});

这样做的好处是你可以将它本地化为一个祖先元素,它可以选择检测CSS中引用的图像.

这只是冰山一角,请查看文档以获取更多功能.

---

老兄,谢谢,这正是我所需要的

4> jschrab..：

---

不保证使用jQuery $().load()作为IMG事件处理程序.如果图像从缓存加载,某些浏览器可能无法触发该事件.对于(较旧的)版本的Safari,如果您将IMG元素的SRC属性更改为相同的值,则onload事件将不会触发.

看来这在最新的jQuery(1.4.x) - http://api.jquery.com/load-event中得到了认可- 引用:

如果从浏览器缓存加载图像,则可能不会触发加载事件.为了解释这种可能性,我们可以使用特殊的加载事件,如果图像准备就会立即触发.event.special.load目前作为插件提供.

现在有一个插件来识别这种情况和IE的IMG元素加载状态的"完整"属性:http: //github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

5> Tom..：

---

根据这个答案,你可以在对象上使用jQuery load事件window而不是document:

jQuery(window).load(function() {
    console.log("page finished loading now.");
});

这将在加载页面上的所有内容后触发.这与jQuery(document).load(...)DOM完成加载后触发的不同.