检查是否加载了图像? [英] Check if images are loaded?

问题描述

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

I'm looking for a sulotion that check if all images are loaded before they are used in a image slider/rotator. I was thinking of a solution that only show the buttons or thumbnails of the images when the main images are loaded to prevent user from clicking on an image that hasen't been downloaded completey.

推荐答案

.ready jQuery文档可能有助于使load和ready之间的区别更加清晰:

The text from the .ready jQuery docs might help make the distinction between load and ready more clear:

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

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

...，并从 .load 文档中:

... and from the .load docs:

load事件在元素和所有子元素都已完全加载时发送到该元素.该事件可以发送到与URL关联的任何元素:图像，脚本，框架，iframe和窗口对象.

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

所以.load是您要寻找的.此事件的最大好处是您可以将其仅附加到DOM的一个子集.假设您将像这样的幻灯片图像放在div中:

So .load is what you're looking for. What's great about this event is that you can attach it to only a subset of the DOM. Let's say you have your slideshow images in a div like this:

<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来触发一旦容器中的所有图像都加载完毕，而与页面上的其他图像无关.

... then you could use .load just on the .slideshow container to trigger once all of the images in the container have been loaded, regardless of other images on the page.

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

(我以display:none为例，它会在加载图像时将其隐藏.)

(I put in a display:none just as an example. It would hide the images while they load.)

更新(2013年3月4日)
从jQuery 1.8版开始不推荐使用此方法

Update (03.04.2013)
This method is deprecated since jQuery Version 1.8

这篇关于检查是否加载了图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！