Question

我正在寻找一种能够检查所有图像是否在图像滑块/旋转器中使用之前加载的闷热感。我正在考虑一个解决方案，只在加载主图像时显示图像的按钮或缩略图，以防止用户点击完整下载的图像。

Answer 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>

...然后，您可以在.load容器上使用.slideshow，以便在加载容器中的所有图片后触发，无论页面上的其他图像如何。

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

（我只是以display:none为例。它会在加载时隐藏图像。）

更新（03.04.2013）
自jQuery Version 1.8

以来，不推荐使用此方法

Answer 2

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

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

Answer 3

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

请参阅：window.onload vs. body.onload vs. document.onready（也适用于Stack Overflow）。

检查图像是否已加载？

3 个答案: