javascript - 如何检查数组中的所有图像是否已加载

Question

我有一个包含一系列图像的数组，我需要检查是否所有图像都已加载，并在所有图像都加载后返回 true，然后再继续。到目前为止，我有：

var image = new Array();
var c=0;
jQuery('.banner-images img').not('.sizer').each(function() {
    image[c] = new Image();
    image[c].src=jQuery(this).attr('src');
    c++;
});
var fc = image.length;
for(i=0;i<fc;i++) {
    // ???
}

我不知道从那里拿它。有什么建议么？

Answer 1

您需要知道，当代码停止执行时（当所有内容都已加载或出现错误时）该函数返回 true，除非您将其设置为处理某些错误。

但是，您可以阻止其他人执行，直到使用preventDefault().

Answer 2

将 onload 处理程序连接到新图像以调用函数来增加计数器。当计数器与数组大小相同时，就完成了。

Answer 3

有很多方法可以做到这一点。
我已经完成了一个加载图像数组的函数，完成后使用加载的图像数组和您可以选择的其他参数调用回调函数。

function load(files, callback)
{
    var args = Array.prototype.slice.call(arguments);
    var loadedFiles = [];
    var load = Function.prototype.bind.apply(callback, [callback,loadedFiles].concat(args.slice(2)));
    for(var i = files.length;i--;)
    {
        load = (function(f, i)
        {
            return function()
            {
                // console.log('Loading '+(i+1)+'.');
                var file = new Image();
                loadedFiles.push(file);
                file.onload = f;
                file.src = files[i];
            };
        })(load, i);
    }
    load();
}

// And then you use it like this
// load(['a.jpg', 'b.jpg'], function(files, extraValue1){console.log('loaded');}, 'anything')

这是一个可以帮助您理解的示例：http: //jsfiddle.net/uN5m9/。

Answer 4

没有内置的javascript方式，但这是一个好方法

https://github.com/desandro/imagesloaded