在JavaScript中預加載多個圖像的最佳方式是什麼？

如果我有圖像文件名的數組，在JavaScript中預加載多個圖像的最佳方式是什麼？

var preload = ["a.gif", "b.gif", "c.gif"];

，我想他們預裝在一個循環中，是否有必要每次都創建一個圖像對象？下面列出的所有方法是否可行？更好嗎？

var image = new Image(); 
for (i = 0; i < preload.length; i++) { 
    image.src = preload[i]; 
}

var image; 
for (i = 0; i < preload.length; i++) { 
    image = new Image(); 
    image.src = preload[i]; 
}

var images = []; 
for (i = 0; i < preload.length; i++) { 
    images[i] = new Image(); 
    images[i].src = preload[i]; 
}

謝謝！

來源

2009-04-17 Emmett

難道你開始了與數組的嚴格要求文件名？如果你的目標是簡單地提高用戶體驗，那麼使用CSS精靈可能會更好：http://www.alistapart.com/articles/sprites/ – 2009-04-17 17:11:15

編輯：

其實，我只是把它放到測試，並如預期A法不起作用：

檢查出來：http://www.rootspot.com/stackoverflow/preload.php

如果單擊2號當頁面完成加載時，圖像應該是瞬間顯示的，因爲它是預加載的，但第一個並不是因爲沒有時間在源文件被更改之前加載。有趣。隨着這一新的發展，我只是繼續前進，並使用方法C.

來源

2009-04-17 17:02:07

我有兩個（可能是啞巴）問題添加到OP的：方法A是否意味着每個下載都必須在下一個開始之前完成？ C是否通過不等待每個下載完成而提供優勢？ – 2009-04-17 17:05:16

沒有任何方法會等待下載完成 - 它們都只是設置Image對象的屬性。不同之處在於A多次使用單個圖像，B會創建單獨的圖像而不保存對所有圖像的引用，並且C都會爲每個預加載創建一個圖像並保存該引用。 – ojrac 2009-04-17 17:11:55

感謝您的澄清。 – 2009-04-17 19:48:32

如果我沒記錯的話，我有A解決方案沒有實際預加載在瀏覽器中的問題。但我不是100％確定的。

由於您已將它們全部編碼出來，爲何不測試它們，甚至可以通過配置文件查看哪些是最快的。

來源

2009-04-17 17:05:16

我一直用下面的代碼，這我也看到了被許多其他網站，所以我會作一個假設，這種方法是最高效的，是類似於你的方法C

function MM_preloadImages() { //v3.0 
    var d=document; 
    if(d.images){ 
     if(!d.MM_p) d.MM_p=new Array(); 
     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; 
     for(i=0; i<a.length; i++) 
      if (a[i].indexOf("#")!=0) { 
       d.MM_p[j]=new Image; d.MM_p[j++].src=a[i]; 
      } 
    } 
}

我會推薦用類似firebug

來源

2009-04-17 17:17:00

來描述它們，下面的代碼似乎適用於我。它基於[A]

JQuery的：

var gallery= ['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png']; 

var preload_image_object=new Image();

//解決方案：

$.each(gallery,function(i,c){preload_image_object.src=c.logo})

$.each(['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'],function(i,c){preload_image_object.src=c})

來源

2010-11-09 06:27:21 Kent

在JavaScript中預加載多個圖像的最佳方式是什麼？

回答

相關問題