Preloading images without Javascript, using CSS instead

If I can find a way of using CSS for something I would normally do with Javascript, I will always go with CSS. It also usually works out easier and cleaner in CSS.

When displaying my 2 stage CSS buttons on a page I was working on, the second stage took a few moments too long to load, so I decided I wanted to preload those images using CSS.

Here is my solution...

The CSS:

img.preload { display: none; width: 1px; height: 1px; }

The HTML:

<img src="./path/to/image.jpg" alt="preloaded" class="preload" />

Just add the class preload to each image and you should be laughing.

By Rick Vause Last updated: 12 August 2009, 13:06

Comments

Gravatar Image #1 Elena 211 days ago.

This is great to know especially for people like me who have a huge fear of javascript. One question though, is this for CSS2 or CSS3?

Gravatar Image #2 Rick Vause 210 days ago.

CSS2, although, I think it was available in CSS1.

You can find notes on the display property here: http://www.blooberry.com/indexdot/css/properties/classify/display.htm

Leave a comment

Comment form is Gravatar and coComment enabled.

Sub Navigation: