Preload Images with CSS
Filed in: Web Development — April 24th, 2006
Forget about complex javascript, we can now preload web page images with a simple CSS trick.
The Code
The trick is done via two parts, the css code and the html code.
CSS code:
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();
-
}
HTML code
HTML:
-
<div id="preloadedImages"></div>
How does it work?
When the browser loads the preloadedImages CSS style, it will loads the background images without displaying it. Then, you can reference to the images elsewhere, and the images will laod instantly from browser cache memory.
[via Specere Blogs]
