在Firefox中預加載圖像不會從相同頁面加載的緩存中檢索

Question

某些上下文中，我在網站的主頁上運行腳本以交換定時器上的背景圖像。我們決定嘗試實施圖像的預加載會更好，它會在Firefox中提示以下問題：

在第一頁加載時預載圖像不會阻止瀏覽器再次從原始源加載圖像，而不是緩存。奇怪的是，刷新頁面將成功導致圖像從緩存中加載。

上的網頁加載運行中的JavaScript通吃的圖像的URL，並試圖通過調用(new Image()).src = 'http:// ...'預裝載這些文件;爲每一個。

檢查頁面加載顯示，該圖像將被裝載在頁面加載，但隨後的圖像也將再次被揭露滑蓋時裝載塊。

測試圖像鏈接（SO聲譽限制）：http://i.stack.imgur.com/E9KLM.png

在圖像中，圖像-66.png，-21.png，-63.png和-83.png從JavaScript的預加載，但當滑塊顯示幻燈片時再次請求。

什麼也奇怪的是，底部的圖像看起來像是排隊等待裝載以來的頁面被創建。也許這是因爲這比文件準備好之後加載的腳本優先？如果我要刷新頁面並跳轉到預加載了圖像但從未透露過的幻燈片，則會顯示它是從緩存中加載的，就像原本應該加載的一樣。

我的理論是，原來的背景圖像可能宣佈需要從當第一次加載頁面的服務器加載，但實際上並沒有加載，直到幻燈片透露。在文檔準備好的時候，當JavaScript預加載圖像時，它們沒有被緩存，所以它們需要從服務器加載。然後顯示一張幻燈片，瀏覽器告訴該圖像需要按最初聲明的那樣加載。

有誰知道爲什麼會出現這種情況？如果是這樣，是否有任何解決方案需要解決？

我有包括添加圖像的URL作爲數據url屬性，而不是，然後有JavaScript的預加載它們，並將它們在這一點上添加爲背景圖像的想法，但我沒有測試過這呢。

Answer 1

對於那些有興趣的人，我們無法找到一個完美的解決方案。

但是，我們注意到的是，圖像是根據其大小再次拉出的。當圖像顯示給用戶時，圖像尺寸越大，圖像未從緩存中獲取的可能性越大。

我們通過進一步壓縮我們的背景圖像，然後大大限制了預裝在第一個頁面加載圖像的量半解決這個問題。我們發現這兩個步驟大大增加了在需要時通過緩存拉入圖像的變化。它還節省了更多的帶寬，並大大提高了頁面加載時間。