A Simple CSS Image preloading technique

A Simple CSS Image preloading technique

So you need to pre-load images, but don’t want to deal with javascript or complicated workarounds. What do you do? The solution is simple. All we need to do is designate a CSS style with multiple background-images. As your browser reads the style, it will load each image you designate in succession, thus pre-loading your images. Below is an example of the CSS:


#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}



The next step is to load this div in your page. This is accomplished by inserting < div id="preloadedImages">< /div> once in the body of the page you are preloading these images. Now you can reference them anywhere on your page (rollovers, alternate image states, etc.), and the image will load instantly from cache.