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

Question

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

谢谢。

Answer 1

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

Answer 2

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

单个图片完全加载后，onload＆lt; img＆gt;事件将会触发。

所以你可以使用jQuery对象或DOM的addEventListener（以及IE的attachEvent）将侦听器附加到这些事件

Answer 3

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

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

http://desandro.github.com/imagesloaded/

希望能帮助他人。

Answer 4

我觉得这看起来有点干净

$('img').load(function() {
    // Your img has finished loading!
});

Answer 5

要进行更全面的图像加载检测，包括从缓存加载的图像，请尝试以下操作：https://github.com/paulirish/jquery.imgloaded

Answer 6

来自一个非常相似的问题Official way to ask jQuery wait for all images to load before executing something，就像Pikrass说的那样：

  

使用jQuery，在加载 DOM 时使用$(document).ready()执行某些操作，并在加载所有其他内容时使用$(window).load()执行某些操作，例如图像

以下是两个例子：

DOM

jQuery(document).ready(function(){
    console.log('DOM ready');
});

图像/其他所有

jQuery(window).load(function(){
    console.log('all other things ready');
});

您应该可以在控制台中确认：

screenshot-with-shadow.png http://img547.imageshack.us/img547/9681/yih.png

Answer 7

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

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

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

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