支持事件的图像预加载器javascript

问题描述

我正在尝试查找图像预加载器脚本。

I am trying to find an image preloader script.

虽然我发现了一些，但它们都不支持预加载完成时触发的事件。

While i found a few, none of them supports an event that is triggered when preloading is finished.

有没有人知道会这样做的任何脚本或jQuery插件？

Does anyone know of any script or jQuery plugin that will do this?

希望这个问题适用于stackoverflow - 如果没有，请随时将其删除。

Hope this question is appropriate for stackoverflow - if not, feel free to remove it in an instant.

推荐答案

这是一个从数组预加载图像并在最后一个完成后调用回调函数的函数：

Here's a function that will preload images from an array and call your callback when the last one has finished:

function preloadImages(srcs, imgs, callback) {
    var img;
    var remaining = srcs.length;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image();
        img.onload = function() {
            --remaining;
            if (remaining <= 0) {
                callback();
            }
        };
        img.src = srcs[i];
        imgs.push(img);
    }
}

// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];

preloadImages(imageSrcs, images, myFunction);

---

因为我们现在已经到了使用promises进行异步操作，这是上面的一个版本，它使用promises并通过ES6标准承诺通知调用者：

---

And since we're now in the age of using promises for asynchronous operations, here's a version of the above that uses promises and notifies the caller via an ES6 standard promise:

function preloadImages(srcs) {
    function loadImage(src) {
        return new Promise(function(resolve, reject) {
            var img = new Image();
            img.onload = function() {
                resolve(img);
            };
            img.onerror = img.onabort = function() {
                reject(src);
            };
            img.src = src;
        });
    }
    var promises = [];
    for (var i = 0; i < srcs.length; i++) {
        promises.push(loadImage(srcs[i]));
    }
    return Promise.all(promises);
}

preloadImages(["src1", "src2", "src3", "src4"]).then(function(imgs) {
    // all images are loaded now and in the array imgs
}, function(errImg) {
    // at least one image failed to load
});

---

而且，这是使用2015 jQuery承诺的版本：

---

And, here's a version using 2015 jQuery promises:

function preloadImages(srcs) {
    function loadImage(src) {
        return new $.Deferred(function(def) {
            var img = new Image();
            img.onload = function() {
                def.resolve(img);
            };
            img.onerror = img.onabort = function() {
                def.reject(src);
            };
            img.src = src;
        }).promise();
    }
    var promises = [];
    for (var i = 0; i < srcs.length; i++) {
        promises.push(loadImage(srcs[i]));
    }
    return $.when.apply($, promises).then(function() {
        // return results as a simple array rather than as separate arguments
        return Array.prototype.slice.call(arguments);
    });
}

preloadImages(["src1", "src2", "src3", "src4"]).then(function(imgs) {
    // all images are loaded now and in the array imgs
}, function(errImg) {
    // at least one image failed to load
});

这篇关于支持事件的图像预加载器javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！