jQuery 检查图像是否加载？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5424055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if images are loaded?
提问by 3D-kreativ
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.
我正在寻找一个 solotion 来检查所有图像是否在图像滑块/旋转器中使用之前都已加载。我正在考虑一种解决方案，该解决方案仅在加载主图像时显示图像的按钮或缩略图，以防止用户单击尚未完全下载的图像。
回答by markquezada
The text from the .readyjQuery docs might help make the distinction between loadand readymore clear:
来自.readyjQuery docs的文本可能有助于区分load和ready更清晰：
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.
虽然 JavaScript 提供了用于在呈现页面时执行代码的 load 事件，但在完全接收到所有资产（例如图像）之前不会触发此事件。在大多数情况下，一旦完全构建了 DOM 层次结构，就可以运行脚本。传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序和运行其他 jQuery 代码的最佳位置。
... and from the .loaddocs:
...以及来自.load文档：
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.
当一个元素和所有子元素都被完全加载时，加载事件被发送到一个元素。此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和 window 对象。
So .loadis 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:
这.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>
... then you could use .loadjust on the .slideshowcontainer to trigger once all of the images in the container have been loaded, regardless of other images on the page.
...然后您可以.load只在.slideshow容器上使用以在容器中的所有图像都已加载后触发，而不管页面上的其他图像如何。
$('.slideshow img').load(function(){
$('.slideshow').show().slideshowPlugin();
});
(I put in a display:nonejust as an example. It would hide the images while they load.)
（我display:none只是举个例子。它会在加载图像时隐藏图像。）
Update (03.04.2013)
This method is deprecated since jQuery Version 1.8
更新 (03.04.2013)
自 jQuery 1.8 版起不推荐使用此方法
回答by Kelsey
You can trigger off each $('img').load()event and enable the related link / click event only once your load has triggered. Advantage to doing it image by image is if certain images are taking longer to load you could still allow the quick ones to be 'clickable'.
您可以触发每个$('img').load()事件并仅在您的负载触发后启用相关链接/点击事件。逐个图像执行的优点是，如果某些图像需要更长的时间来加载，您仍然可以允许快速的图像“可点击”。
$('img').load(function() {
// find the related link or click event and enable/add it
});
回答by David says reinstate Monica
Rather than checking if all images are loaded, why not create the slider/rotator using the $(window).load()event, rather than the usual $(document).ready()? $(window).load()waits for the page to finish loading, including resources such as images, before executing.
与其检查所有图像是否已加载，为什么不使用$(window).load()事件创建滑块/旋转器，而不是通常的$(document).ready()？$(window).load()在执行之前等待页面完成加载，包括图像等资源。
See: window.onload vs. body.onload vs. document.onready(also on Stack Overflow).
请参阅：window.onload vs. body.onload vs. document.onready（也在 Stack Overflow 上）。
