CSS image preloading, guide

If you would like to use this article or portions of it, please contact me. Also let me know if you have feedback, positive or negative. Smiley

CSS image preloading is a technique which you can effectively implement by using only XHTML and CSS. The results which you will achieve are superior to what can be done with JavaScript. This universal preload technique works even on older Internet browsers, and on those browsers that have JavaScript disabled or unavailable. By using CSS image preloading, you can select which images will be downloaded before all the other images on the web page. An additional good thing with this little “trick” is that your page’s accessibility levels will stay the same.

Funky camel Smiley Photo by Phillip Collier.

Why use preload?

Preloading is usually not a crucial technique, however, sometimes you really do need to preload some images using some of the techniques available. If you don’t, your page may not work correctly. The important elements on your web page may download too slowly and this could prove to be a problem for all the visitors who have slow internet connections. Bear in mind that most people still dial up with modems!

Defining the specific problem

Let us say for an example that you have a web site featuring several pictures of camels and a menu.

There are four main categories on the menu, and all of them are made by using large <a> tags which feature some bold white text and a nice background graphic used for achieving contrast, and all of these features are defined in the CSS file. The page also features several larger images of camels defined by using the <img /> tag inside the XHTML file.

Page elements load in the following order:

  1. XHTML
  2. CSS
  3. all of the images found on the site
  4. background images defined in CSS

The problem with CSS background images is that they have lower loading priority. When a user connected to the Internet with a dial up modem accesses the page, he won’t be able to see the white text found within the <a> tags, because not all the background images which are being used as a contrast background will load until everything else on the page has finished loading. This really is a problem, because the user cannot know that there is more to the menu, and that he should wait a bit for the background images to load (he can’t see text, because it is on the default white background – standard CSS property when background image is still not loaded or missing). What may happen is that the visitor may not be interested at all by the content of the page, and would perhaps prefer to go to another section of the site, which he can’t do because he can not see the complete menu. – All of the images still have not loaded, and consequently, all of the CSS background images have not yet loaded.

Camel couple. Photo by Mira Pavlaković.

CSS image preload

The images fetched from the XHTML file by using the <img src=”image.gif” alt=”Image description” /> have highest loading priority, and after they have been loaded, the images from CSS will load next. Furthermore, all of the images located at the beginning of the XHTML document will load first (even higher priority). The solution to this problem is to put four background images at the very top of the file, and then “un display” them:

body
{
background:white;
}
#preload img
{
height: 0; width: 0; border-width: 0;
position: absolute;
bottom: 0;
left: 0;
z-index: -30;
}

Bear in mind that you can’t use the display: none tag because some older web browsers will not load the images if they are styled that way.

You have to use the position: absolute tag to position the preloaded images on the bottom left of the page with z-index lower than that of the other elements found on the page. The reason for this is simple; the older browsers will display the images as little black dots appearing at the positions where they are called in the XHTML file. By using this simple yet effective method you will hide them beneath a white colored background layer. Bottom left is great place to hide something, because users rarely look that way. Smiley

You should also be able to drop the “height: 0; width: 0; border-width: 0;” line because of the background position, but I think the previous method is much more failsafe.

When using XHTML code, you are expected to place images intended for preload as close to the top as possible.

<h1>Site title</h1>

<div id=”preload”>
<img src=”img/bg_1.jpg” alt=”Camel BG1, PRELOAD” />
<img src=”img/bg_2.jpg” alt=”Camel BG2, PRELOAD” />
<img src=”img/bg_3.jpg” alt=”Camel BG3, PRELOAD” />
<img src=”img/bg_4.jpg” alt=”Camel BG4, PRELOAD” />
</div>

Images intended to be preloaded are located after the <h1>Site title</h1> heading tag. If you should load the page without any CSS, it will still look acceptable, and its title header / title of the page will appear on the beginning of the page. Images are further described by using comments (alt=”” description), so someone using your site in its naked form (without CSS) will be able to understand what those images are all about and it won’t bother them. Smiley One additional benefit is that the text-only users will get a clue on what this page looks like in all its glory. Of course, you can provide even more detailed comments with your images, by using longdesc=”” tags, if you find it appropriate.

If you want to control the print output of your page, then use:

<style type=”text/css” media=”print”>
#preload
{
display: none
}
</style>

This will stop preloaded images from being printed.

Other alternatives

You could still try to utilize JavaScript image preloading, but in my opinion the CSS image preloading method is a lot simpler, and it works across many different browser platforms. This method has been tested, and proved working on (23.07.2006.):

  • Microsoft Internet Explorer 5 / 5.5 / 6
  • Mozilla Firefox 1 / 1.5
  • Opera 7 / 8 / 9
  • Netscape Browser 7 / 8
  • Apple Safari 2

JavaScript preload (tutorials):

 

I hope you liked this little CSS image preload tutorial! If you have any comments, or a suggestion, contact me!

 

I would also like to thank Paul for some useful suggestions on improving this article.