Although most people know that you can pre-load images using Javascript, I thought I’d add my own method; Pre-loading images with CSS.
You can do it in 2 easy steps.
Put something like this in your CSS file:
#preloadedImages {
width: 0;
height: 0;
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);
}
Make sure you change, of course, the quantity of images and the paths to them. This step makes certain the mentioned images are loaded into your cache as the browser goes through your CSS file.
Step 2:
Then, simply load a <div> element with your ID high up in the (x)html page (directly under the opening <body> tag is recommended), and viola! For example:
<div id="preloadedImages"></div>
Note: This <div> doesn’t need to contain anything, or do anything more than I’ve already written. To use your pre-loaded images, simply call them into your code as you would normally. The above trick simply gets them loaded into your browser’s cache long before you call them in your code.
February 11th, 2007 at 4:44 am
Very Cool! Thanks for the post
April 26th, 2007 at 1:54 pm
I wonder if display:none; still loads the background images?… Maybe you could have JS write this code… a cross-browser solution so you still have clean markup, but you let the CSS do the pre-loading