Загрузите сразу меняющиеся фоновые изображения

Question

Я создал сайт с меняющимися фоновыми изображениями.
HTML:

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

CSS:

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

И JS код, который изменяет БГ изображение каждые 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]; 
    } 
}