jQuery或JavaScript：确定图像何时完成加载

如何从服务器或浏览器缓存中检测图像何时完成加载？ 我想在同一个标签中加载各种图像，并检测新图像的加载何时完成。

谢谢。

Answer 1

 $('img').on('load', function() { // do whatever you want }); 

Answer 2

只有在所有元素（包括图像）完全加载后， onload文档的事件才会触发。

单个图像完全加载后， onload 的事件将触发。

所以你可以使用jQuery对象或DOM的addEventListener（以及IE的attachEvent）为这些事件附加一个监听器

Answer 3

嗯，这是我昨天遇到的一个老话题。 我正在使用backbone.js和require.js并且调整我的布局总是会导致包含图像的视图出现问题。

因此，我需要一种方法来了解最后一个图像何时加载以调整布局大小。 上面提到的所有解决方案在我的案例中都不起作用。 经过几个小时的调查后，我找到了最终解决方案：

http://sofzh.miximages.com/javascript/pp screenshot-with-shadow.png http://img547.imageshack.us/img547/9681/yih.png

Answer 4

每个人都提到应该在设置为src之前触发该事件。

但是如果您不想担心它，可以使用oncomplete事件（即使使用缓存的图像也会触发）来触发onload ，如下所示：

 $("img").one("load", function() { // do stuff }).each(function() { if(this.complete) $(this).load(); }); 

使用jQuery，您不必担心向后兼容性（例如： IE img.height>0 ）