Question

我制作了一个jquery插件，用于显示图像： http://jsfiddle.net/wfARj/

他的一个功能是预加载图片：

function preload(){
        for (var i = firstIndex; i <= lastIndex; i++) {
            images[i] = new Image();
            images[i].onload = function(response){
                console.log(this.src + ' is successfully loaded!');
            }
            images[i].src = $(selector).eq(i).attr('href');
        }

}

问题在于，当某些照片很大（> 5MB）时，网站加载速度太慢。

我尝试：

function preload(){
    setTimeout(function(){
            for(var i = firstIndex;i <= lastIndex;i++)
            {
                images[i] = new Image();
                images[i].onload = function(response){
                    console.log(this.src + ' is successfully loaded!');
                }
                if(elementType=='A') images[i].src = $(selector).eq(i).attr('href');
                else if(elementType=='IMG') images[i].src =            $(selector).eq(i).attr('src');
                else images[i].src = '';
            }
        }, 300);
}

但问题仍然存在...... 我希望在页面加载后在后台预加载图像。使用window.bind load检测整页加载是不安全的选项。我怎么能解决这个问题？

感谢

Answer 1

但for循环闭包内的settimeout因此每次加载调用都会获得自己的超时。

function preload(){
            for(var i = firstIndex;i <= lastIndex;i++)
            {
                setTimeout(function(){
                    images[i] = new Image();
                    images[i].onload = function(response){
                         console.log(this.src + ' is successfully loaded!');
                    }
                    if(elementType=='A') images[i].src = $(selector).eq(i).attr('href');
                    else if(elementType=='IMG') images[i].src =   $(selector).eq(i).attr('src');
                    else images[i].src = '';
                }, 300);
        }
}

jquery插件预加载图像

1 个答案: