Preloading images using CSS

by Andre Engelbrecht

css design

Some of us may be familiar with the problem of roll-over images that temporarily disappears as you roll over them. This is because the browser is downloading the roll-over image at that time. There are solutinos using javascript, and this method have become quite popular over the last couple of years. But what do you do, when the user has javascript turned off?

The method here is very simple, no extra javascript needed. I was quite surprised on how simple this process is, and I might just swap out my rollover script on this website, with a pure CSS alternative.

So, how do we do this?

Firstly we need to create a little bit of CSS.

.preload { display: none; }

Next, in our html page where we want the pages to preload, we add the following right before our closing </body> tag.

<img class="preload" src="path/to/image" />

And that's it! Simple and effective.

I've implemented this technique on the IRI website, and as I said, may soon change the nav rollovers on this site to use the same method.

You can use Markdown to format your comment.