预加载图像后触发事件

Question

这是我用来预加载图像的代码,我不确定它是否是最好的.我的问题是,如何触发和事件,例如alert(); 对话框已经完成加载所有图像？

var preload = ["a.gif", "b.gif", "c.gif"];
    var images = [];
    for (i = 0; i < preload.length; i++) {
        images[i] = new Image();
        images[i].src = preload[i];
    }

Answer 1

如果您愿意,可以使用新的"$ .Deferred":

var preload = ["a.gif", "b.gif", "c.gif"];
var promises = [];
for (var i = 0; i < preload.length; i++) {
    (function(url, promise) {
        var img = new Image();
        img.onload = function() {
          promise.resolve();
        };
        img.src = url;
    })(preload[i], promises[i] = $.Deferred());
}
$.when.apply($, promises).done(function() {
  alert("All images ready sir!");
});

让Image对象漂浮在周围可能有点风险,但如果是这样,可以通过移动闭包来轻松修复.编辑其实我会自己改变它因为它让我烦恼:-)

Answer 2

由于你的标签包含jQuery,这就是我在jQuery中所做的,从这个相关的答案中得到了很多灵感:

function preloadImages(images, callback) {
    var count = images.length;
    if(count === 0) {
        callback();
    }
    var loaded = 0;
    $.each(images, function(index, image) {
        $('<img>').attr('src', image).on('load', function() { // the first argument could also be 'load error abort' if you wanted to *always* execute the callback
            loaded++;
            if (loaded === count) {
                callback();
            }
        });
    });
};

// use whatever callback you really want as the argument
preloadImages(["a.gif", "b.gif", "c.gif"], function() {
    alert("DONE");
});

这依赖于对jQuery的加载函数的回调.

我不会仅仅因为我不喜欢使用Javascript的内置原型来使用相关的答案.