检查图片是否加载？

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

文字来自.readyjQuery 文档可能有助于区分load and ready更清晰：

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

...并且从.load docs:

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

So .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举个例子。它会在加载图像时隐藏图像。）

更新（2013年4月3日）
自 jQuery 版本 1.8 起，此方法已被弃用