如何檢查數組中的所有圖像已加載

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()阻止其他人的執行，直到加載圖像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/ 。