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;
    }
}