Pre-load images with CSS

Most anyone who’s been messing around with webpages and HTML over the past few years I’m sure is familiar with the concept of pre-loading images. If you have a rollover effect (for instance, mouseover effects on a menu bar), it makes good sense to pre-load your images so that the effect shows up immediately when your visitor moves their cursor over the image/object. For a long time, the most popular way to accomplish this was by adding javascript to your HEAD section and an onload snippet to your BODY tag.

There is a much easier way to do this with CSS. I had ran across this a long time ago, but never bookmarked the link.

Bad designer, BAD!

Luckily, I ran across it again recently and thought I’d post it here in case anyone else was interested in how to do this.

In your stylesheet, add the following:

.hiddenpic {display:none;}

Then add your image that you want pre-loaded just following the </HEAD> tag. For example:

<img src="/images/navhover.gif" alt="" class="hiddenPic" />

OR, you could put several images inside a DIV:

<div class="hiddenPic"><img src="/images/hover1.gif" alt="" /> <img src="/images/hover2.gif" alt="" /> <img src="/images/hover3.gif" alt="" /></div>

Just keep in mind that these images will load before you page does, so don’t overdo it with HUGE images!