检查图像是否加载？

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

2011-03-24 3D-kreativ

可能重复[如何确定图像是否已加载，使用Javascript/jQuery？]（http://stackoverflow.com/questions/263359/how-can-i-determine-if-an-image- has-loaded-using-javascript-jquery） – 2013-06-28 22:36:40

从.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只是作为一个例子。而他们加载它会隐藏图像。）

更新（2013年4月3日）
因为jQuery的1.8版本这个方法已经过时

来源

2011-03-24 19:26:30 markquezada

他们为什么会贬低这么好的功能？ * arg *现在我们必须使用一个7kb的文件，例如http://www.desandro.github.io/imagesloaded/ :( – ItsMeDom 2013-06-13 16:27:32

@DoJoChi其实，我不认为你必须加载另一个文件。从文档中，替换''.load''使用''.on''（http://api.jquery.com/on/）的适当参数，例如''.on（'load'，handler）'' – Nathan 2013-06-17 21:40:02

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

请参阅：window.onload vs. body.onload vs. document.onready（也在Stack Overflow上）。

来源

2011-03-24 18:56:05

您可以触发每个$('img').load()事件，并且只在您的负载触发后启用相关链接/点击事件。如果某些图片的加载时间较长，您仍然可以让快速的图片“可点击”

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

来源

2011-03-24 18:58:14 Kelsey

然后我必须为每个图像使用一个ID？ – 2011-03-24 19:09:53

@ user637364你可以或如果你的图像包裹在标签你可以只引用容器。你也可以在img和锚等之间共享css名字......有很多关于img的选项。 – Kelsey 2011-03-24 19:40:08

检查图像是否加载？

回答

相关问题