圖片預加載不起作用

我寫了（很好，複製）了一個Javascript圖片預加載函數，它似乎在我的頁面加載時成功地預加載了我的圖片，但是當頁面實際需要顯示圖片時，顯然再次加載它們，擊敗了預加載的目的。此行爲和修復的可能原因？圖片預加載不起作用

我試過但未能創建可重複的代碼，所以我猜這是在我整個項目的複雜性的某個地方。下面是我使用的圖像預載功能：

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

加載頁面時，我把這個保存在我們的服務器上的圖像的多頭排列上，我可以看到在「GET」請求一長串我控制檯，似乎表明它確實預載圖像。後來，當圖像顯示在動態生成的內容中（如果它很重要，使用jQuery），當它們加載時會有延遲，並且在控制檯中看到另一個GET請求，狀態爲「HTTP/1.1 304 Not Modified」。因此，看起來像是再次加載圖像，而不是使用緩存版本。什麼可能導致這個？

我在圖像預加載之前發生了一些ajax調用，在圖像顯示之前，其中有「cache：false」 - 是否可能的原因？但是，這些ajax調用不會直接影響頁面內容 - 它們只是用於獲取數據庫信息，這反過來會影響頁面內容。

順便說一下，我使用Firefox進行測試。我曾經在某處看過Chrome瀏覽器會發送請求，以查看緩存的圖片是否已被修改，但這應該不是Firefox的問題。

來源

2014-03-24 baixiwei

關閉Firebug並且您的圖片將不會被加載兩次。如果您打開了螢火蟲，預先加載的圖像將不會被緩存。

你可以像Charles

來源

2014-03-24 16:06:02 nils

感謝您的評論。我不認爲這是我的問題，因爲我沒有使用Firebug。另外，我認爲我在Chrome上遇到了相同或相關的問題 - 絕對是圖像加載速度緩慢，因此似乎預加載無法正常工作，儘管在Chrome上我沒有在控制檯中看到GET請求。再次感謝，很高興知道。 – baixiwei

Thx;這是我的問題。另外，當使用Ajax預加載時，Firefox仍會發出第二個http請求。所以CSS背景更適合圖像預加載。 – bodo

@baixiwei完全描述我的問題。我正在使用chrome開發工具，但是當我關閉它並使用Wireshark監視網絡流量時，我發現了完全相同的行爲（GET已經加載了GET的圖像）。我認爲這個問題不是由devtools/firebug造成的。 –

我只是想出瞭解決這個問題的方式，似乎是工作的代理驗證此行爲。

而是通過JavaScript創建一個新的圖像，然後分配給它的src，你可以定義與背景圖像的CSS元素你想預加載該要素動態地追加到身體像這樣：

CSS：

#preload { 
    background: url('/image.jpeg') no-repeat -9999px -9999px; 
}

使用Javascript（我使用jQuery的爲簡單起見）：

jQuery(window).load(function() { 
    jQuery('body').append('<div id="preload"></div>'); 
});

希望幫助。

來源

2014-12-13 01:36:02

圖片預加載不起作用

回答

相關問題