使用JavaScript或jQuery确定图片何时完成加载：

Question

如何使用JavaScript或jQuery检测图像何时完成加载，无论是从服务器还是浏览器缓存中加载？ 我希望在同一个<img/>标签中加载各种图像，并检测新图像的加载何时完成。

- Francisc

---

你想在加载时进行回调，还是只是检测它？如果要回调，请参考已接受的答案，可能重复：https://dev59.com/HW855IYBdhLWcg3w3Ifs - Ciro Santilli OurBigBook.com

Answer 1

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

- Matt

---

嘿，谢谢Matt。那个处理程序每次为img标签设置新的src时都会触发吗？（就像值提交一样） - Francisc

如果图像在分配处理程序时已经存在于DOM中并且使用了缓存版本，那么这种方法将无效。 - Gabriele Petrioli

@Gaby：无论是否缓存，它都应该正常工作。更关键的问题是确保在图像加载之前*挂钩事件：https://dev59.com/TU3Sa4cB1Zd3GeqPyMkt#2833076 - T.J. Crowder

@T.J.Crowder，我的意思是您想要加载的图像...而不是一个空标签。如果在图像标签中放置了src，那么如果图像被缓存，则在您有时间分配它之前，加载事件会触发..例如http://www.jsfiddle.net/gaby/Xdeh4/（*第一张图片不会触发加载事件*），但重新阅读问题后，我发现OP有特定的要求，不会遇到这个问题，因为他对更改现有标记的`src`感兴趣。 - Gabriele Petrioli

正如我所说，更重要的问题是确保在图像加载之前就已经钩住了事件。 - T.J. Crowder

Answer 2

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

onload<img>事件将在单个图像完全加载后触发。

因此，您可以使用jQuery对象或DOM的addEventListener（以及IE的attachEvent）附加侦听器到这些事件。

- Pik'

Answer 3

我认为这看起来更加简洁。

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

- Henrik

Answer 4

这是一个我昨天看到的相当古老的帖子。 我正在使用backbone.js和require.js，并且调整我的布局总是导致包含图像的视图出现问题。

因此，我需要一种方法来知道最后一张图像何时加载完成以调整布局。 所有上述提到的解决方案在我的情况下都不起作用。 经过几个小时的调查后，我找到了最终有效的解决方案：

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

希望这也能帮助其他人。

- bardu

Answer 5

为了更全面地检测图像加载情况，包括从缓存中加载的图像，请尝试使用此方法：https://github.com/paulirish/jquery.imgloaded。

- Jonathan Beebe

Answer 6

从一个非常类似的问题 官方方法：等待jQuery加载所有图片后再执行某些操作，就像Pikrass所说的那样：

使用jQuery时，你可以使用$(document).ready()在DOM加载完成后执行某些操作，而使用$(window).load()在所有其他东西都加载完成后执行某些操作，例如图片。

以下是两个示例：

##DOM

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

##图片/其他

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

您应该能够在控制台中确认：

（注意：本文中的HTML标签已保留，不做翻译）

- cwd

Answer 7

大家都提到事件应该在设置src之前触发。

但是如果你不想担心这个问题，可以使用oncomplete事件（即使使用缓存的图像也会触发）来触发onload，像这样：

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

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

- Tomas Ramirez Sarduy