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

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

https://github.com/desandro/imagesloaded

Answer 2

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

但是，您可以阻止执行其他人，直到使用preventDefault()加载图片。

Answer 3

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

Answer 4

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

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/。

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

4 个答案: