Pre-loading Images Using Stylesheets

One way of making web pages load faster is if the images that the page uses have already been cached (downloaded to your visitor's computer). This is most easily achieved when you have a series of web pages that you expect your visitor to access in order. Since they will need to spend some time actually reading each page before moving on to the next you can use this time to download some of the images for the following page.

To do this we simply add the image tags for these images right at the bottom of the web page where they will be the last things to start to load. Since everything above then in the page will start to load before these images do having these extra images at the bottom of the page should not significantly affect the amount of time that it takes to download everything that actually belongs to the current page. The page will take longer to load but since these extra images are not going to be displayed on this page and they are being downloaded last your visitors shouldn't notice this.

Since these images don't belong to this page we don't really want them showing on this page. To stop them appearing we override the size of the image using a style attribute and to keep the image from being too noticeable if your visitor is using a really old browser that doesn't recognise the style attribute we override the wedth and height attributes too.

Here is an example of how to code these images (remember that they should go immediately before the </body> tag):

<img src="myimg.gif" style="width:0;height:0" width="1" height="1" alt="" />

If you want to pre-load two or more images just specify them all one after the other. Don't include too many though.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow