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

Question

支持事件的图像预加载器javascript我正在尝试找到一个图像预加载器脚本。虽然我发现了一些，但它们都不支持在预加载完成时触发的事件。有谁知道会这样做的任何脚本或jQuery插件？希望这个问题适合stackoverflow - 如果没有，请随时将其删除。

Answer 1

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

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标准承诺通知调用者：

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承诺的版本：

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

});