在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(){}内的代码之前等待所有图像加载。所以如果你正在使用这个平台,你会得到我正在寻找的行为,而不是上面描述的正确行为。
使用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', '...');
});
我写了一个插件,可以在图像加载到元素时触发回调,或者每加载一个图像就触发一次。
它类似于$(window).load(function() {..}),除了它允许您定义任何选择器进行检查。如果你只想知道什么时候所有的图片在#content(例如)已经加载,这是为你的插件。
它还支持加载CSS中引用的图像,如background-image, list-style-image等。
jQuery插件
GitHub库。
自述文件。
生产来源。
开发源码。
示例使用
$('selector').waitForImages(function() {
alert('All images are loaded.');
});
jsFiddle的例子。
更多的文档可以在GitHub页面上找到。
$(window).load()只在页面第一次加载时起作用。如果你正在做动态的事情(例如:点击按钮,等待一些新的图像加载),这是行不通的。要实现这一点,你可以使用我的插件:
下载
/**
* Plugin which is applied on a list of img objects and calls
* the specified callback function, only when all of them are loaded (or errored).
* @version: 1.0.0 (Feb/22/2010)
*/
(function($) {
$.fn.batchImageLoad = function(options) {
var images = $(this);
var originalTotalImagesCount = images.size();
var totalImagesCount = originalTotalImagesCount;
var elementsLoaded = 0;
// Init
$.fn.batchImageLoad.defaults = {
loadingCompleteCallback: null,
imageLoadedCallback: null
}
var opts = $.extend({}, $.fn.batchImageLoad.defaults, options);
// Start
images.each(function() {
// The image has already been loaded (cached)
if ($(this)[0].complete) {
totalImagesCount--;
if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
// The image is loading, so attach the listener
} else {
$(this).load(function() {
elementsLoaded++;
if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
// An image has been loaded
if (elementsLoaded >= totalImagesCount)
if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
});
$(this).error(function() {
elementsLoaded++;
if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
// The image has errored
if (elementsLoaded >= totalImagesCount)
if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
});
}
});
// There are no unloaded images
if (totalImagesCount <= 0)
if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
};
})(jQuery);