Cayce Cookbook - Offscreen Image PreLoader

Off-Screen Image Preloader

Couple of cool things about this preloader. One is that because the images are loaded into the actual page code, they're more quickly accessible for display. The other is that because they're physically loaded into the page, the preload can be verified by changing the offset position attribute.

Copy the code below into the header.

Copy the code below just inside the body tag.

Download Text File of Code

Notes:

This goes in the header:

<style type="text/css">
/* image cacheing:
Any images contained in this div will be loaded offscreen, and thus cached. */
@media projection, screen {
div.imgCache { position: absolute; left: -8000px; top: -8000px; }
div.imgCache img { display:block; }
}
@media print { div.imgCache { display: none; } }
</style>


****************************************************************

This div goes just inside the body:

<DIV class="imgCache">
<img src="images/image.jpg">
<img src="images/image.jpg">
<img src="images/image.jpg">
<img src="images/image.jpg">
<img src="images/image.jpg">
<img src="images/image.jpg">
<img src="images/image.jpg">
<img src="images/image.jpg">
<img src="images/image.jpg">
<img src="images/image.jpg">
<img src="images/image.jpg">
</div>