支持事件的图像预加载器 javascript [英] Image preloader javascript that supports events

问题描述

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

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

<小时>

由于我们现在正处于使用 promise 进行异步操作的时代，这里有一个使用 promise 并通过 ES6 标准 promise 通知调用者的上述版本:

---

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 promise 的版本:

---

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！