Preloading Images using CSS

Here’s an interesting CSS technique that Gil Hanson uses to pre-load images onto his website. He uses the first few moments a person is looking at his page for the first time to quickly download all the images to his site.

In his CSS at the top of the page he creates the following CSS class selector:

.hiddenPic { display:none; }

at the bottom of the page he loads up all the images used on his website including the class selector as one of the attributes of the <img /> element.

<img src=”image/gil_bw.jpg” alt=”B&W of Gil” class=”hiddenPic” />
This causes all the images to be loaded into memory, but not displayed because of the class assignment. Then, when the user goes to another web page in the site, the pictures display immediately, because they have already been downloaded. This is a great way to handle images with graphic intensive sites.

You can see this code in action on his resume at http://webpages.charter.net/gilh/resume.html As the page loads keep your eye on the status bar at the bottom of the browser. You’ll see all those files quickly and quietly downloading behind the scene.


Technorati :
Del.icio.us :
Ice Rocket :
Buzznet :