Image preloading with CSS

This is an old one from the CSS Ninja, it is one I seem to use quite a bit.

preloading images

The CSS content property in conjunction with the <i>:before</i> and <i>:after</i> pseudo-elements allows us to generate content in a document.

Couldn't be much simpler. Just add the following css, with your references to images to preload.

body:after
{
  content: url(img01.jpg) 
    url(img02.jpg) 
    url(img03.jpg);
  display: none;
}

<b>Browser support</b>

IE8+
FF2+
Safari 3+
Chrome 1+
Opera 9.62+