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