Download Changing Background Images Immediately

I created site with changing background images. HTML:

CSS: #templatemo_header { background: url(images/templatemo_header.jpg) n

Solution 1:

There are a few ways to pre-load images using javascript here. By pre-loading the images you may have better luck when displaying them. In your case I would use Method 3 if possible, if not Method 2. As described in the article, you would use the window.onload event to kick off the downloading of the images once the page has loaded.

I would just setup your image array as follows:

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];
    }
}