javascript - jQuery，如何预加载图像并在加载图像时得到通知？

Question

我对所有 Javascript 东西还是新手，老实说，我还没有对我的问题进行任何实验。

我想知道是否有一种方法或插件可以使用 jQuery 预加载多个图像并在加载图像时调用函数？

Answer 1

您可以对图像使用 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;
    }
}