Javascript圖像預加載，我在做錯事

我使用document.images在訪問者第一次訪問網站時加載圖像。原因是因爲我有幾個不同的區域有翻轉圖像。在切換到使用CSS sprites（修改大量工作）之前，我會在這裏問。Javascript圖像預加載，我在做錯事

所以我預載圖片與此：

images = new Array(); 

if (document.images) { 
    images.push(preloadImage("http://website.com/images/myimg.png", 300, 200)); 
} 

function preloadImage(src, x, y) { 
    var img = new Image(x, y); 
    img.src = src; 
    return img; 
}

而且根據Chrome的「資源」面板，這是工作就好了。即使按下CTRL + F5，也會下載JS中列出的圖像。

然而，它們沒有被使用。如果我將鼠標懸停在我的三個腳本中的某個元素上，則圖像是，第二次下載。 DERP？

我認爲當以這種方式預加載圖像時，應該將該圖像數組用於使用。我認爲瀏覽器會足夠聰明地說「嘿，這是相同的圖像，讓我們使用它兩次」，但顯然不是。

那麼這是正確的嗎？我是否需要重寫我的程序以單獨預載圖像？我知道這聽起來不難，但它並不是爲此而設計的。

來源

2011-11-14 Radley Sustaire

什麼是圖像上的緩存設置？ –

您不需要將創建的圖像存儲在數組中。一旦你設置了它們的源屬性，這個文件就會被下載。您可以立即丟棄圖像對象。另外，'if（document.images）...'檢查沒有意義。 – katspaugh

這不是你的問題的答案，但我推薦了一個不同的解決方案。將所有需要預先加載的圖像放在對用戶隱藏的div中。我知道，我知道，我不是那麼優雅，但它應該工作得很好。 :)

<div style="display: none;"> 
    <img src="http://website.com/images/myimg.png" alt=""/> 
    ... 
</div>

來源

2011-11-14 19:25:38

's/hidden/none'，否則+1，因爲這是一個無JS的解決方案。我以前使用過這個策略，取得了巨大的成功。你不能搞砸這樣簡單的事情。 –

/facepalm，爲什麼我沒有想到這個？奇蹟般有效。 –

也能正常工作對我來說：

function imgPreload() { 
     var imageList = [ 
      "my/firstimage.png", 
      "my/secondimage.jpg", 
      "my/thirdimage.png" 
     ]; 
     for (var i = 0; i < imageList.length; i++) { 
      var imageObject = new Image(); 
      imageObject.src = imageList[i]; 
     } 
    } 

    imgPreload();

乾杯。 Frank

來源

2011-11-14 19:42:27

Javascript圖像預加載，我在做錯事

回答

相關問題