使用jQuery或JavaScript進行圖片預加載

Question

我需要在幻燈片中使用很多圖片，並且希望在使用前預加載它。
我用這個代碼

$.fn.preload = function() { 
    this.each(function() { 
    $('<img/>')[0].src = this; 
    }); 
}; 

$(['../img/portfolio_arrko_1.jpg', '../img/portfolio_arrko_2.jpg', '../img/portfolio_arrko_3.jpg', '../img/portfolio_arrko_4.jpg', '../img/portfolio_arrko_5.jpg', '../img/portfolio_arrko_6.jpg', '../img/portfolio_arrko_7.jpg', '../img/portfolio_politics_1.jpg', '../img/portfolio_politics_2.jpg', '../img/portfolio_politics_3.jpg', '../img/portfolio_politics_4.jpg', '../img/portfolio_politics_5.jpg', '../img/portfolio_politics_6.jpg', '../img/portfolio_politics_7.jpg', '../img/portfolio_city_1.jpg', '../img/portfolio_city_2.jpg', '../img/portfolio_city_3.jpg', '../img/portfolio_city_4.jpg', '../img/portfolio_city_5.jpg', '../img/portfolio_city_6.jpg', '../img/portfolio_invest_1.jpg', '../img/portfolio_invest_2.jpg', '../img/portfolio_invest_3.jpg', '../img/portfolio_invest_4.jpg', '../img/portfolio_nidec_1.jpg', '../img/portfolio_nidec_2.jpg', '../img/portfolio_nidec_3.jpg', '../img/portfolio_nidec_4.jpg', '../img/portfolio_nidec_5.jpg', '../img/portfolio_nidec_6.jpg', '../img/portfolio_nidec_7.jpg', '../img/portfolio_nidec_8.jpg', '../img/portfolio_nidec_9.jpg', '../img/portfolio_nidec_10.jpg', '../img/portfolio_nidec_11.jpg', '../img/portfolio_zavod_1.jpg', '../img/portfolio_zavod_2.jpg', '../img/portfolio_zavod_3.jpg', '../img/portfolio_zavod_4.jpg', '../img/portfolio_zavod_5.jpg', '../img/portfolio_zavod_6.jpg', '../img/portfolio_zavod_7.jpg', '../img/portfolio_zavod_8.jpg', '../img/portfolio_zavod_9.jpg', '../img/portfolio_razvitie_1.jpg', '../img/portfolio_razvitie_2.jpg', '../img/portfolio_razvitie_3.jpg', '../img/portfolio_razvitie_4.jpg', '../img/portfolio_razvitie_5.jpg', '../img/portfolio_razvitie_6.jpg', '../img/portfolio_rzanik_1.jpg', '../img/portfolio_rzanik_2.jpg', '../img/portfolio_rzanik_3.jpg', '../img/portfolio_rzanik_4.jpg', '../img/portfolio_rzanik_5.jpg', , '../img/portfolio_rzanik_6.jpg', '../img/portfolio_sport_1.jpg', '../img/portfolio_sport_2.jpg', '../img/portfolio_sport_3.jpg', '../img/portfolio_sport_4.jpg', '../img/portfolio_sport_5.jpg', '../img/portfolio_sport_6.jpg', '../img/portfolio_sport_7.jpg', '../img/portfolio_sport_8.jpg', '../img/portfolio_stal_1.jpg', '../img/portfolio_stal_2.jpg', '../img/portfolio_stal_3.jpg', '../img/portfolio_stal_4.jpg', '../img/portfolio_stal_5.jpg', '../img/portfolio_stal_6.jpg', '../img/portfolio_stal_7.jpg', '../img/portfolio_stal_8.jpg', '../img/portfolio_stal_9.jpg', '../img/portfolio_hleb_1.jpg', '../img/portfolio_hleb_2.jpg', '../img/portfolio_hleb_3.jpg', '../img/portfolio_hleb_4.jpg', '../img/portfolio_hleb_5.jpg', '../img/portfolio_hleb_6.jpg', '../img/portfolio_elit_1.jpg', '../img/portfolio_elit_2.jpg', '../img/portfolio_elit_3.jpg', '../img/portfolio_elit_4.jpg', '../img/portfolio_elit_5.jpg']).preload(); 

，但我不知道，可以嗎？也許，有沒有更好的方法來做到這一點？

Answer 1

這將工作，但請注意，此過程不會推遲DOM準備事件。這意味着可以在圖像尚未加載時顯示實際使用的地點。

這種方法就可以了對動態web應用，即，其中圖像被最初沒有示出，但是當一些頁面活動發生時（例如，當被創建包含預先高速緩存的圖像中的一個新的小窗口和顯示。）

Answer 2

作爲@Andrew提到，你可能想知道什麼時候所有圖像都完全加載。要做到這一點，你可以計算像這樣加載的圖像的數量：

<script language="javascript"> 
$(function() { 

    var $imgs = $(['1.jpg', '2.jpg', '3.jpg']);// Please chenge to actual image paths. 
    var num_total = $imgs.length; 
    var num_loaded = 0; 

    $.fn.preload = function() { 
     this.each(function(){ 
      $("<img/>").attr("src", this).load(function() { 
       num_loaded++; 
       if (num_loaded >= num_total) { 
        // Now all images are fully loaded. 
        // You can start your great slideshow. 
        alert("preload complete"); 
       } 
      }); 
     }); 
    } 

    $imgs.preload(); // call above function 

}); 
</script> 

希望這會有所幫助。