检查图像是否加载？答案

【问题标题】：Check if images are loaded?检查图像是否加载？
【发布时间】：2011-03-24 18:54:20
【问题描述】：

我正在寻找一种检查方法，用于检查所有图像是否在用于图像滑块/旋转器之前都已加载。我正在考虑一种解决方案，该解决方案仅在加载主图像时显示图像的按钮或缩略图，以防止用户单击尚未完全下载的图像。

【问题讨论】：

How can I determine if an image has loaded, using Javascript/jQuery? 的可能重复项

标签： jquery

【解决方案1】：

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

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

...来自.load 文档：

当一个元素和所有子元素都被完全加载后，加载事件会被发送到该元素。此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和窗口对象。

所以.load 就是您要查找的内容。这个事件的好处是你可以只将它附加到 DOM 的一个子集。假设您将幻灯片图像放在这样的 div 中：

<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 起，此方法已被弃用

【讨论】：

他们为什么要弃用这么棒的功能？ arg 现在我们必须使用一个 7kb 的文件，例如 desandro.github.io/imagesloaded :(
@DoJoChi 实际上，我认为您不必加载另一个文件。从文档中，.load 的替换是使用 .on (api.jquery.com/on) 的适当参数，例如.on('load', handler)

【解决方案2】：

您可以触发每个$('img').load() 事件并仅在触发加载后启用相关的链接/点击事件。逐个图像处理的好处是，如果某些图像需要更长的时间来加载，您仍然可以让快速的图像“可点击”。

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

【讨论】：

那我要为每张图片使用一个ID？
@user637364 你可以，或者如果你的图像被包裹在标签中，你可以只引用容器。您还可以在 img 和锚点等之间共享 css 名称......很多用于关联 img 的选项。

【解决方案3】：

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

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

【讨论】：