Create an image preloader without javascript

The principle of image preload is simple: from the beginning of the loading of the html page, the big images are placed in memory (but you can't see them) within the pc cache so that they don't need to be loaded again to be viewed later.

This technique is generally used with javascript, it makes it more comfortable for users.

We will preload our images with CSS only. (View result here)

The principle is quite simple: the trick is not to show the image on the screen thanks to the display :none property.

 

Technique: insert CSS style directly within the img tag. 

Place the img tags at the beginning, right under the <body> tag:

<img src="image1.gif" style="display:none;" alt=""/>
<img src="image2.gif" style="display:none;" alt=""/>

and our preloading works. The empty ALT tag is important, it allows the text-browsers for the blind to ignore the image.

 

Variation for older browsers and a lot of images: Older browsers, preceding Netscape 4 did not understand the display: none property and will still show the images.
We will use this to place a text that will be showed only on older browsers. 

<div style="display:none">
Your browser does not support CSS.

  If images appear below, please disregard them.
<hr />
<img src="image1.gif" alt="" />
<img src="image2.gif" alt="" />
<img src="image3.gif" alt="" />
<img src="image4.gif" alt="" />
</div>

Other technique:

Certain Internet Explorer versions under certain platforms interpret the display : none literaly and don't read the images at all (they don't put it in the cache).

Another way to go around that is to place all the preloaded images to the very top of the page, where they won't be accessible at all -for example at -5,000 pixels to the top of the document.

Use an absolute positionning and apply it to all of the images to be preloaded:

<div style="position: absolute; left: 0; top: -5000px">
Your browser does not support CSS. If images appear below, please disregard them.
<hr />
<img src="image1.gif" alt="" />
<img src="image2.gif" alt="" />
<img src="image3.gif" alt="" />
<img src="image4.gif" alt="" />
</div>
Print article

Raphaël GOETTER (with some help from Meerthyl)
www.alsacreations.com