Preloading Images Without Javascript

Here's a cool little trick I'm using on this site to preload the images for the hover-over replacements (today, search, archives). Without this trick, when you first hover over any of those links there's a delay before the image appears while the browser fetches it.

First, put this in your CSS file:

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

Next, at the end of your HTML document, place the following, with one line for each image you want to preload:

<div id="preloaded-images">
   <img src="http://mydomain.com/image-01.png" width="1" height="1" alt="Image 01" />
   <img src="http://mydomain.com/image-02.png" width="1" height="1" alt="Image 02" />
   <img src="http://mydomain.com/image-03.png" width="1" height="1" alt="Image 03" />
</div>

This worked for me when for some reason Javascript preloading would not.