jQuery插件預加載圖像

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加載不是安全選項來檢測整頁加載。 我該如何解決？

謝謝

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);
        }
}