我对所有 Javascript 的东西还是陌生的,老实说,我还没有尝试过任何关于我的问题的东西。
我想知道是否有一种方法或一个带有 jQuery 的插件来预加载多个图像并在加载图像时调用一个函数?
我对所有 Javascript 的东西还是陌生的,老实说,我还没有尝试过任何关于我的问题的东西。
我想知道是否有一种方法或一个带有 jQuery 的插件来预加载多个图像并在加载图像时调用一个函数?
您可以将load
事件用于图像,但它们存在许多跨浏览器问题(这取决于您所针对的平台)。
var allImgs = $("#container img").filter(function() { return ! this.complete; });
var allImgsLength = allImgs.length;
allImgs.on("load", function() {
if (--allImgsLength) {
// Images have loaded.
}
});
如果您不介意包含一个插件,那么可以使用 waitForImages(免责声明:由我编写),它可以很好地处理这个问题。:)
你会像使用它一样...
$("#container").waitForImages(function() {
// Images have loaded.
});
如果您根本不想使用 jQuery,您可以修改第一个示例。如果您只针对现代浏览器...
var allImgs = [].filter.call(document.querySelectorAll("#container img"),
function(img) {
return ! img.complete;
});
var allImgsLength = allImgs.length;
[].forEach.call(allImgs, function(img) {
img.addEventListener(function() {
if (--allImgsLength) {
// Images have loaded.
}
});
});
如果您必须支持旧浏览器...
var allImgs = document.getElementById("container").getElementsByTagName("img");
var allImgsLength = allImgs.length;
var i;
var eventCallback = function() {
if (--allImgsLength) {
// Images have loaded.
}
};
for (i = 0; i < allImgsLength; i++) {
if (allImgs[i].complete) {
allImgsLength--;
}
if (allImgs[i].addEventListener) {
allImgs[i].addEventListener("load", eventCallback);
} elseif (allImgs[i].attachEvent) {
allImgs[i].attachEvent("onload", eventCallback);
} else {
allImgs[i].onload = eventCallback;
}
}