Question

我想要写预加载器图像，但我仍然坚持检查已经lodead图像：

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对象的'complete'属性，而它不会有这个。尝试访问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);

使用对象数组预加载图像

2 个答案: