如何預載圖像

我正試圖在我的網頁上預載圖像。我見過很多關於它的討論，其中大多數建議創建一個圖片對象然後編輯src屬性。但是，這不適用於最新版本的Chrome和Firefox。該請求被標記爲「掛起」，直到圖像實際顯示在頁面上，然後我可以在要顯示的圖像之前注意到一點延遲。在顯示圖像之前，即使在頁面上創建實際的標籤（顯示：無）也不起作用。最後，當我嘗試下面的代碼，只在循環的最後的影像實際加載如何預載圖像

var img = document.getElementById('some_visible_image'); 
for(var i=1;i<5;i++) 
    for(var j=1;j<3;j++){ 
     img.src = 'images/'+i+'_'+j+'_green.png'; 
     img.src = 'images/'+i+'_'+j+'_orange.png'; 
     img.src = 'images/'+i+'_'+j+'_red.png'; 
    }

那麼怎樣才能減少我的圖片加載時間（不使用大精靈）？

來源

2014-03-05 André

你需要爲每個圖像

// redirect after all the images are preloaded 
function redirect() { 
    location.href = "yourtargetpage.html"; 
} 

// should solve the first-time-load problem 
var loads = 0; 
function loaded() { 
    // the total number of images needed to load 
    if(++loads==42) redirect(); 
} 

// if all the images aren't loaded in 3 seconds, don't wait further 
setTimeout(redirect, 3000); 

for(var i=1;i<5;i++) 
for(var j=1;j<3;j++){ 
    var img = new Image(); 
    img.src = 'images/'+i+'_'+j+'_green.png'; 
    if(img.complete) loaded(); // if cached, onload isn't fired sometimes 
    else img.onload = loaded; // fires for the first time the page loads 
}

或src創建實例被覆蓋的圖像有機會先加載。

要立即顯示您的圖片先裝後，你可以在不同的頁面上運行此腳本，等到每個圖像

來源

2014-03-05 11:38:25

謝謝。圖像現在加載到FF（我可以看到在Firebug中），但當我第一次顯示圖像時（在清理緩存之後），我仍然注意到延遲。有什麼需要做的嗎？它雖然在Opera上運行良好。 –

我可以看到問題：當我運行JS代碼時，請求實際上是由Firefox發送的，但是當我想要第一次顯示圖像時，Firefox再次發送請求。然後，它看起來像圖像實際上被緩存。 –

@André查看我的更新回答 –

嘗試的visibility:hidden;代替display:none;

來源

2014-03-05 11:38:33 Mischa

感謝您的回覆。這與我上面編寫的代碼相同，並有一個可見的臨時圖像。 –

我找到了解決方案，這要歸功於揚Turoň的回答。這裏是我的代碼：

for(var i=1;i<=5;i++) 
    for(var j=1;j<=3;j++){ 
     var img = new Image(); 
     img.src = 'images/'+i+'_'+j+'_green.png'; 
     var img = new Image(); 
     img.src = 'images/'+i+'_'+j+'_orange.png'; 
     var img = new Image(); 
     img.src = 'images/'+i+'_'+j+'_red.png'; 
     var img = new Image(); 
     img.src = 'images/'+i+'_'+j+'_grey.png'; 
    }

來源

2014-03-05 13:28:39

如何預載圖像

回答

相關問題