javascript - 使用对象数组预加载图像

Question

我想写预加载图像，但我一直在检查已经加载的图像：

var imgContainer = [];

$(this).find('img').each(function() {
    imgContainer.push({
        image: $(this)
        // other properties
    })
});

setInterval(function() {
    console.log(imgContainer[0].image.complete);  // undefined
}, 2000);

但是这个解决方案有效（数组中没有对象）：

var imgContainer = $(this).find('img');

setInterval(function() {
    console.log(imgContainer[0].complete)         // true
}, 2000);

为什么它不起作用？

Answer 1

而不是使用setInterval, 来检查是否所有图像都已加载，只需将上面的代码替换为以下代码：

(function(that){
    var remains = 0;        
    var loadHandler = function(){
       if(--remains == 0){
          console.log('All images are loaded !!!');
       }   
    };

    $(that).find('img').each(function() {
         if( !this.complete ){
             remains++;
             $(this).load(loadHandler);
         }
    });        
})(this);

Answer 2

在您的代码中，您尝试访问 jQuery 对象上的“完成”属性，而它没有这个属性。尝试访问 DOM 元素本身的完整属性。

我相信这段代码应该更好地工作：

var imgContainer = [];

$(this).find('img').each(function() {
    imgContainer.push({
        image: $(this)
        // other properties
    })
});

setInterval(function() {
    /* imgContainer = array with objects, [0] = get first element */
    /* image = jQuery collection, [0] = get dom element of the first item in the collection */
    console.log(imgContainer[0].image[0].complete);  
}, 2000);