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

Question

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

我正在尝试找到一个图像预加载器脚本。

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

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

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

Answer 1

这是一个从数组中预加载图像并在最后一个完成后调用回调的函数：function preloadImages(srcs, imgs, callback) {&nbsp; &nbsp; var img;&nbsp; &nbsp; var remaining = srcs.length;&nbsp; &nbsp; for (var i = 0; i < srcs.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; img = new Image();&nbsp; &nbsp; &nbsp; &nbsp; img.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --remaining;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (remaining <= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callback();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; img.src = srcs[i];&nbsp; &nbsp; &nbsp; &nbsp; imgs.push(img);&nbsp; &nbsp; }}// then to call it, you would use thisvar imageSrcs = ["src1", "src2", "src3", "src4"];var images = [];preloadImages(imageSrcs, images, myFunction);而且由于我们现在正处于使用promises进行异步操作的时代，这里是上面的一个版本，它使用promises并通过ES6标准承诺通知调用者：function preloadImages(srcs) {&nbsp; &nbsp; function loadImage(src) {&nbsp; &nbsp; &nbsp; &nbsp; return new Promise(function(resolve, reject) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var img = new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resolve(img);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.onerror = img.onabort = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reject(src);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.src = src;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; var promises = [];&nbsp; &nbsp; for (var i = 0; i < srcs.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; promises.push(loadImage(srcs[i]));&nbsp; &nbsp; }&nbsp; &nbsp; return Promise.all(promises);}preloadImages(["src1", "src2", "src3", "src4"]).then(function(imgs) {&nbsp; &nbsp; // all images are loaded now and in the array imgs}, function(errImg) {&nbsp; &nbsp; // at least one image failed to load});而且，这是一个使用2015 jQuery承诺的版本：function preloadImages(srcs) {&nbsp; &nbsp; function loadImage(src) {&nbsp; &nbsp; &nbsp; &nbsp; return new $.Deferred(function(def) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var img = new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; def.resolve(img);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.onerror = img.onabort = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; def.reject(src);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.src = src;&nbsp; &nbsp; &nbsp; &nbsp; }).promise();&nbsp; &nbsp; }&nbsp; &nbsp; var promises = [];&nbsp; &nbsp; for (var i = 0; i < srcs.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; promises.push(loadImage(srcs[i]));&nbsp; &nbsp; }&nbsp; &nbsp; return $.when.apply($, promises).then(function() {&nbsp; &nbsp; &nbsp; &nbsp; // return results as a simple array rather than as separate arguments&nbsp; &nbsp; &nbsp; &nbsp; return Array.prototype.slice.call(arguments);&nbsp; &nbsp; });}preloadImages(["src1", "src2", "src3", "src4"]).then(function(imgs) {&nbsp; &nbsp; // all images are loaded now and in the array imgs}, function(errImg) {&nbsp; &nbsp; // at least one image failed to load});