Now excuse me for pulling up an old chestnut, but this is one that comes up often for people who are just starting out with CSS and want to avoid the extensive javascript output by many website design applications such as Dreamweaver and the dreaded Front Page. This method only requires a very minor understanding of CSS, cleans up your markup and achieves the desired effect.

Step 1: Creating the CSS.

First, let’s start with the CSS we’ll need. This step is very simple, as there is only one line that you will need to add to your stylesheet. Decide what name you would like to use for your preload. In this case we have gone with the creative Class name “preload.” If this is fine for you, simply paste this code into your stylesheet. Otherwise, change the Class to another name you are more comfortable with, bearing in mind you will need to do this on the final code as well. I’ll cover why we chose to use a Class instead of an ID in just a minute.

Code to paste into your stylesheet:
.preload{display:none;}

Step 2: Creating the DIV.

Next, we’ll create the actual DIV that will contain the images you want to preload. If you are using a site that you created yourself, this can go in the footer area of your page, as this will ensure that the main portion of the site loads before your preloaded images. If you want this preload active on every page of your site, make sure to either A. Copy the code to each page of your site, or B. (Preferred) include a footer.txt file that will contain this preload on every page of your site. That way, if you need to add or remove an item, you can do it in one place instead of on every page. If you are using a site that has a WYSIWYG editor and you only want the preload on one page (or want to add different images for preload on each page), you can do this by clicking on the “view code” or “view source” button in the editor and entering the code at the bottom of the editor. The reason we chose to use a Class rather than an ID is because this will grant you the most flexibility to add more than one set of preloads to a site. Say you have a web site with database-driven content. You have a set of preload images in the footer that is outputted automatically on every page, but one particular page also needs a few more preloaded images. You can accomplish this simply by adding those few images into the WYSIWYG editor as described above, without having to worry about having two DIV’s with the same ID on a particular page.

Code to modify/paste into your web site:
<div class="preload">
<img src="images/dog-over.gif" alt="Dog" />
<img src="images/cat-over.gif" alt="Cat" />
<img src="images/mouse-over.gif" alt="Mouse" />
</div>Remember to add an alternate tag to each image!

Step 3: Testing.
Try it out! For our example, we created two different sets of images. One has a CSS preload, while one does not. Run your mouse over each, see the difference? The preloaded image loads immediately, while the non-preloaded image flashes before loading. Note that once you have moused over the non-preload image once, you will need to refresh the page to see it flash again.

WITH Preload

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC, Linux and Mac), Netscape and Safari (PC and Mac).

That’s all folks!

If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

Tags: css, preload

This entry was posted on Thursday, January 17th, 2008 at 1:33 pm and is filed under css. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.