我正在寻找一种解决方案,检查所有图像是否已加载,然后再在图像滑块/旋转器中使用它们。我考虑的解决方案是,在主要图像加载完成前只显示按钮或缩略图,以防止用户单击尚未完全下载的图像。
.ready jQuery文档中的文字可能有助于更清楚地区分load
和ready
:
虽然JavaScript提供了加载事件来执行页面呈现时的代码,但此事件直到所有资产(如图像)完全接收后才会触发。在大多数情况下,只要DOM层次结构已完全构建,脚本就可以运行。传递给`.ready()`的处理程序保证在DOM准备就绪后执行,因此这通常是附加所有其他事件处理程序和运行其他jQuery代码的最佳位置。
...还有.load文档中的内容:
当元素及其所有子元素完全加载时,将向该元素发送加载事件。此事件可以发送到与URL相关联的任何元素:图像、脚本、帧、iframe和窗口对象。
因此,您应该使用.load
。这个事件的好处是,您可以将其附加到DOM的子集上。假设您的幻灯片图片在一个像这样的
<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以后,这种方法已经不再被推荐使用了。
.load
”的方法是使用适当的参数来调用“.on
”(http://api.jquery.com/on/),例如“`.on('load', handler)`”。 - Nathan$('img').load()
事件,并在您的加载已触发后仅启用相关链接/单击事件。逐张图像进行操作的优点是,如果某些图像需要更长时间才能加载,您仍然可以允许快速加载的图像“可点击”。$('img').load(function() {
// find the related link or click event and enable/add it
});
$(window).load()
事件创建滑块/旋转器,而不是通常的$(document).ready()
?$(window).load()
等待页面完成加载,包括图像等资源,然后再执行。