使用jQuery預加載圖像

我在Nettuts上獲得了tutorial comment（James）的代碼片段，我想實現它。使用jQuery預加載圖像

預加載圖像的教程方法很囉嗦，但我喜歡James的這個縮短版本，但是，我試圖實現這一點，我沒有得到它的權利。

看來我需要首先設置我的數組，循環通過該數組，然後創建圖像對象並加載它們。然而，當我檢查我的Firebug時，我沒有看到任何圖像加載到緩存中。

$(function(){ 
     var imgArray = ['bghome01.jpg', 'bghome02.jpg', 'bghome03.jpg']; 
     $.preload = function (imgArray) { 
      $.each(imgArray, function() { 
       alert(imgArray); 
       (new Image()).src = 'Images/' + this; 
      }); 
     }; 
    });

我很感謝您的幫助！

來源

2010-06-29 Sixfoot Studio

重複：http://stackoverflow.com/questions/476679/preloading-images-with-jquery?rq=1 – 2013-06-24 08:34:08

-1

如果我其中瀏覽器我只會加載頁面上的圖像，所以我懷疑他的發生，因爲你永遠不會將圖像添加到DOM。嘗試設置創建一個新的img標籤與style="visibility:hidden"並將其添加到DOM。

來源

2010-06-29 07:14:26

嗨馬丁，通過對NETTUTS該教程閱讀，它到底是什麼傢伙因爲這樣做 - 將圖像注入頁面並隱藏它們。如果你仔細閱讀，在評論中，詹姆斯（不是我）就以不同的方式加載圖像發表評論。您是否暗示沒有將圖像加載到緩存中的方式將圖像加載到緩存中？謝謝;） – 2010-06-29 07:20:25

我必須承認我沒有對此做任何研究。但我可以想象，一個智能瀏覽器不會加載任何圖像，而不是「在」頁面上。您的Firefox顯然是這樣做的... – 2010-06-29 07:27:59

-1圖片預加載是加快頁面加載時間的標準技巧。這是可能的，你不需要將圖像添加到DOM。 – 2010-06-29 08:35:32

我的猜測是，你不保留圖像對象，所以垃圾收集可能會在圖像加載之前丟棄它們。

請參閱本文的一些代碼：http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

注意jQuery不會做任何的魔法;它最終都是JavaScript，所以你的代碼必須有錯誤。因此，如果讓圖像對象保持活躍狀態不會有幫助，也許this article會指出您正確的方向。

來源

2010-06-29 08:39:53

第一篇文章在DOM中創建節點，第二篇文章似乎假設什麼都不會收集垃圾。我認爲你是對的，OP應該只是把圖像數組放在頂層的上下文中。 – wds 2010-06-29 09:01:42

就在這裏，你定義功能，但不調用它：

$.preload = function (imgArray) {

如果你只是想加載圖像，可以苗條下來到這一點：

$(function(){ 
    var imgArray = ['bghome01.jpg', 'bghome02.jpg', 'bghome03.jpg']; 
    $.each(imgArray, function() { 
    (new Image()).src = 'Images/' + this; 
    }); 
});

或者，你可以用你原來的方法做到，函數定義可以在外部文件中，但是在你需要調用的頁面中，像這樣：

var imgArray = ['bghome01.jpg', 'bghome02.jpg', 'bghome03.jpg']; 
$.preload(imgArray);

我認爲這裏的混亂來自imgArray爲陣和的參數是名字，但這些都是2件獨立的事情，如果你給的參數$.preload不同的名稱可能是減少混亂。

來源

2010-06-29 11:23:48

使用jQuery預加載圖像

回答

相關問題