Pure CSS image preloading
/* ADD THIS TO CSS */
div#preloaded-images {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
<!-- ADD THIS TO XHTML -->
<div id="preloaded-images">
<img src="http://perishablepress.com/image-01.png" width="1" height="1" alt="Image 01" />
<img src="http://perishablepress.com/image-02.png" width="1" height="1" alt="Image 02" />
<img src="http://perishablepress.com/image-03.png" width="1" height="1" alt="Image 03" />
</div>