Great CSS Effects #4

So far we have talked about image effects and link effects, but there is a much greater use for CSS than just that. Did you know that approximately 33% of internet surfers may leave a page if it has not loaded in 8 seconds? To help keep your visitors interested, utilize CSS to speed up image load time. CSS can be used to preload your images, and it can load images from other pages. This will load your images into cache making them quicker to access. Meaning if you have a picture gallery you can setup a preload on one of your smaller pages such as your main page which is usually smaller. Options like this can also be used with Javascript, but will not work for people whose browsers disable Javascript.

The best part is that it is so easy. Just add the following code to your CSS file.

.hiddenpic {display:none;}

Now that part was extremely simple and so is this next step. On the page that you wish to preload the images place the following code. Remember that this doesn't have to be the page that contains the images.

<img src="yourpic.png" alt="something to describe image" height="yourheight" width="yourwidth" class="hiddenpic">

Please note that “height” will be the height of your image and “width” will be the width of the image. It will not show on the page that you preload, because of the display: none in your CSS. This code should be placed at the bottom of the page that way it will be the last code to be loaded. Therefore not interfering with the load time of the page you place them on. Remember that you have to you need good content on the page where you use this code so that you can keep visitors busy while the images all preload.