在jQuery中,当你这样做:
$(function() {
alert("DOM is loaded, but images not necessarily all loaded");
});
它等待DOM加载并执行您的代码。如果没有加载所有的图像,那么它仍然执行代码。这显然是我们在初始化任何DOM内容(如显示或隐藏元素或附加事件)时所需要的。
假设我想要一些动画我不想让它运行直到所有图像都加载完毕。jQuery中有官方的方法来做到这一点吗?
最好的方法是使用<body onload="finished()“>,但除非迫不得已,我真的不想这么做。
注意:在ie浏览器的jQuery 1.3.1中有一个bug,它实际上是在执行$function(){}内的代码之前等待所有图像加载。所以如果你正在使用这个平台,你会得到我正在寻找的行为,而不是上面描述的正确行为。
我写了一个插件,可以在图像加载到元素时触发回调,或者每加载一个图像就触发一次。
它类似于$(window).load(function() {..}),除了它允许您定义任何选择器进行检查。如果你只想知道什么时候所有的图片在#content(例如)已经加载,这是为你的插件。
它还支持加载CSS中引用的图像,如background-image, list-style-image等。
jQuery插件
GitHub库。
自述文件。
生产来源。
开发源码。
示例使用
$('selector').waitForImages(function() {
alert('All images are loaded.');
});
jsFiddle的例子。
更多的文档可以在GitHub页面上找到。
使用imagesLoaded PACKAGED v3.1.8(最小化时6.8 Kb)。这是一个相对较老的项目(自2010年以来),但仍然是活跃的项目。
你可以在github上找到:
https://github.com/desandro/imagesloaded
他们的官方网站:
http://imagesloaded.desandro.com/
为什么它比使用更好:
$(window).load()
因为您可能希望动态加载图像,就像这样:jsfiddle
$('#button').click(function(){
$('#image').attr('src', '...');
});