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

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

1 个答案: