检查图片是否加载完成？

Question

我正在寻找一种解决方案，检查所有图像是否已加载，然后再在图像滑块/旋转器中使用它们。我考虑的解决方案是，在主要图像加载完成前只显示按钮或缩略图，以防止用户单击尚未完全下载的图像。

- 3D-kreativ

---

可能是重复的问题：如何使用Javascript/jQuery确定图像是否已加载？ - Steve Tauber

Answer 1

.ready jQuery文档中的文字可能有助于更清楚地区分load和ready:

虽然JavaScript提供了加载事件来执行页面呈现时的代码，但此事件直到所有资产（如图像）完全接收后才会触发。在大多数情况下，只要DOM层次结构已完全构建，脚本就可以运行。传递给`.ready()`的处理程序保证在DOM准备就绪后执行，因此这通常是附加所有其他事件处理程序和运行其他jQuery代码的最佳位置。

...还有.load文档中的内容:

当元素及其所有子元素完全加载时，将向该元素发送加载事件。此事件可以发送到与URL相关联的任何元素：图像、脚本、帧、iframe和窗口对象。

因此，您应该使用.load。这个事件的好处是，您可以将其附加到DOM的子集上。假设您的幻灯片图片在一个像这样的

中：

<div class="slideshow" style="display:none">
  <img src="image1.png"/>
  <img src="image2.png"/>
  <img src="image3.png"/>
  <img src="image4.png"/>
  <img src="image5.png"/>
</div>

如果你想在容器内的所有图片加载完成后触发，而不管页面上的其他图片，则可以仅在.slideshow容器上使用.load。

$('.slideshow img').load(function(){
  $('.slideshow').show().slideshowPlugin();
});

我只是举例说明，放置display:none能够在图片加载时隐藏图片。

更新（03.04.2013）
自从jQuery版本1.8以后，这种方法已经不再被推荐使用了。

- markquezada

---

为什么他们要废弃这个如此出色的函数？arg现在我们不得不使用一个7kb的文件，比如http://www.desandro.github.io/imagesloaded/ :( - ItsMeDom

实际上，我认为你不一定需要加载另一个文件。根据文档，替代“.load”的方法是使用适当的参数来调用“.on”（http://api.jquery.com/on/），例如“`.on('load', handler)`”。 - Nathan

Answer 2

您可以触发每个 $('img').load() 事件，并在您的加载已触发后仅启用相关链接/单击事件。逐张图像进行操作的优点是，如果某些图像需要更长时间才能加载，您仍然可以允许快速加载的图像“可点击”。

$('img').load(function() {
    // find the related link or click event and enable/add it
});

- Kelsey

---

那我每张图片都要使用一个ID吗？ - 3D-kreativ

@user637364，如果您的图像被包装在<a>标签中，那么您可以直接引用该容器。您还可以在img和anchor之间共享CSS名称等...有很多关于相关图像的选项。 - Kelsey

Answer 3

不要检查所有图像是否已加载，为什么不使用$(window).load()事件创建滑块/旋转器，而不是通常的$(document).ready()？$(window).load()等待页面完成加载，包括图像等资源，然后再执行。

参见：window.onload vs. body.onload vs. document.onready（也在Stack Overflow上）。

- David Thomas