jquery - jQuery所有图像加载后再执行某些功能

  显示原文与译文双语对照的内容

在jQuery中执行以下操作:


$(function() {
 alert("DOM is loaded, but images not necessarily all loaded");
});

它等待DOM加载并执行你的代码。 如果所有图像都没有加载,那么它仍然执行代码。 如果初始化任何DOM内容,如显示或者隐藏元素或者附加事件,这显然是我们想要的。

看看我说虽然我想要的一些动画,我不想让它运行,直到所有的图像都加载。 在jQuery中有一个官方的方式来做这个?

最好的方法我已经是使用 <body onload="finished()">,但我不确定要做到这一点,除非我得。

注意:有一个 jQuery中 Bug 1.3.1$function() { } 内 IE 它实际上能够等到所有图像都显示地加载在执行代码之前。 所以如果你使用那个平台,你会得到我正在寻找的行为而不是上面描述的正确行为。

时间:

使用 jQuery,你可以使用 $(document).ready() 在加载 DOM 时执行某些操作,并在加载其他所有东西时执行 $(window).load(),比如图像。

如果你有一个 jollyroger JPEG文件( 或者其他合适的),可以在以下完整的HTML文件中看到差异:


<html>
 <head>
 <script src="jquery-1.7.1.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 alert ("done");
 });
 </script>
 </head><body>
 Hello
 <img src="jollyroger00.jpg">
 <img src="jollyroger01.jpg">
 //: 100 copies of this
 <img src="jollyroger99.jpg">
 </body>
</html>

这样,在加载图像之前,会出现警告框,因为DOM已经在那个位置。 如果你随后更改:


$(document).ready(function() {

进入:


$(window).load(function() {

然后在图像是 loaded, 警报框不会显示,直到.后

因此,要等到整个页面准备就绪,你可以使用以下内容:


$(window).load(function() {
//weave your magic here.
});

我编写了一个插件,当图像加载到元素中时可以激发回调,或者每次加载图像时激发一次。

它类似于 $(window).load(function() {.. }) ,除了它允许你定义任何选中的选择器。 如果你只想知道 #content ( 例如) 中的所有图像什么时候加载,这就是你的插件。

它还支持加载CSS中引用的图像,如 background-imagelist-style-image 等。

waitForImages插件插件

用法举例


$('selector').waitForImages(function() {
 alert('All images are loaded.');
});

jsFiddle上的示例。

在GitHub页面上有更多文档可用。

$(window).load() 只在页面第一次加载时工作。 如果你正在执行动态内容( 例如: 单击按钮,等待一些新图像加载,这将不起作用。 要实现这一点,你可以使用我的插件:

演示

下载

对于那些希望得到 $(window).load 激发后的单个图像的下载完成通知的人,可以使用元素事件的图像 load

比如:


//create a dialog box with an embedded image
var $dialog = $("<div><img src='" + img_url +"'/></div>");

//get the image element (as a jQuery object)
var $imgElement = $dialog.find("img");

//wait for the image to load 
$imgElement.load(function() {
 alert("The image has loaded; width:" + $imgElement.width() +"px");
});

有了jQuery我就来了。。


$(function() {
 var $img = $('img'),
 totalImg = $img.length;

 var waitImgDone = function() {
 totalImg--;
 if (!totalImg) alert("Images chargées!");
 };

 $('img').each(function() {
 $(this)
. load(waitImgDone)
. error(waitImgDone);
 });
});

演示:http://jsfiddle.net/molokoloco/NWjDb/

...