Preloading Images with CSS
I know, I know. It’s practically sacreligious to even suggest preloading images in any language other than Javascript, but a friend recently suggested this technique to me and after trying it out, I’m sold. The code is light, very straightforward, and more important - simple. I don’t know how many times I’ve written the Javascript code, but for some reason I always screw it up the first time and end up going back scratching my head for a few minutes before spotting the error. This is just elegant in comparison - you can’t screw up an HTML image. So without furrther ado…
The CSS
Create a class with display set to none and add it to your stylesheet:
<style type="text/css">
.hiddenPic {display:none;}
</style>
The HTML
Add image tags for your big images at the bottom of the page. I did this for big rollover images to achieve a smooth roll, but you can also preload the images for secondary pages at the bottom of your home page.
<img src="first_big_image.jpg" alt="whatever" height="350" width="350" class="hiddenPic">
<img src="second_big_image.jpg" alt="whatever" height="350" width="350" class="hiddenPic">
<img src="third_big_image.jpg" alt="whatever" height="350" width="350" class="hiddenPic">
And that’s it. Voila. Love it.