立即下載更改背景圖片

Question

我使用不斷變化的背景圖片創建了網站。
HTML：

<div id="templatemo_header"> 
</div> 

CSS：

#templatemo_header { 
    background: url(images/templatemo_header.jpg) no-repeat; 
} 

和JS代碼，其改變BG圖像每個3秒

function displayImage(image) { 
    document.getElementById("templatemo_header").style.backgroundImage = image; 
} 

function displayNextImage() { 
    x = (x == images.length - 1) ? 0 : x + 1; 
    displayImage(images[x]);   
} 

function displayPreviousImage() { 
    x = (x <= 0) ? images.length - 1 : x - 1; 
    displayImage(images[x]);   
} 

function startTimer() { 
    setInterval(displayNextImage, 3000); 
} 

var images = [], x = -1; 
images[0] = 'url("images/templatemo_header1.jpg")'; 
images[1] = 'url("images/templatemo_header2.jpg")'; 
images[2] = 'url("images/templatemo_header3.jpg")'; 
images[3] = 'url("images/templatemo_header.jpg")'; 

問題是，當每個BG的圖像的改變僅第一次，圖像消失，並在一段時間後出現新的圖像。
我想，這是因爲新的BG圖像被下載。
是否有辦法強制立即下載圖像，說在函數startTimer？
在此先感謝。

Answer 1

有幾種方法可以使用javascript here預加載圖像。通過預加載圖像，您可能在顯示圖像時運氣更好。在你的情況下，如果可能的話，我會使用方法3，如果沒有的話。方法2.如文章中所述，你可以使用window.onload事件來啓動頁面加載後的圖像下載。

我只想設置你的圖像的排列如下：

window.onload = preLoadImages(); 

function preLoadImages(){ 
    preLoadImage = new Image(); 

    images[0] = "images/templatemo_header1.jpg"; 
    images[1] = "images/templatemo_header2.jpg"; 
    images[2] = "images/templatemo_header3.jpg"; 
    images[3] = "images/templatemo_header.jpg"; 

    for(i=0, i<=images.length, i++){ 
     preLoadImage.src=images[i]; 
    } 
}