Preloading Images With CSS
Many web developers preload images to speed up page display, and JavaScript is the common method of preloading images. However, if a visitor has JavaScript disabled, the images will not be preloaded. There is a way to use the CSS display property to request an image but not display it. To demonstrate this technique, we created two fairly large (350+KB) animated images. One of the images was preloaded, the other was not. Here is how we used CSS to preload the image:
1) In the <head> section of this page we created a CSS class to prevent the display of an image:
<style type="text/css">
.hiddenPic {display:none;}
</style>
2) We placed the following image tag near the bottom of this page to load one of the images and used the .hiddenPic class to prevent the display of the image:
<img src="assets/preload.gif" alt="preload" width="837" height="238" class="hiddenPic" />
The following link loads the two images for comparison purposes. Unfortunately, the demo is not very dramatic with a broadband connection. Also, you will need to clear your browser's cache if you have visited this page previously.
