CSS image preloading, guide - 2006.
This article is print ready.
Funky camel 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:
- all of the images found on the site
- 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:
height: 0; width: 0; border-width: 0;
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.
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.
<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" />
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. 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:
This will stop preloaded images from being printed.
- Microsoft Internet Explorer 5 / 5.5 / 6
- Mozilla Firefox 1 / 1.5
- Opera 7 / 8 / 9
- Netscape Browser 7 / 8
- Apple Safari 2
If you didn't understand some of the terms or methods used in this tutorial, you might be interested in a few of these:
Warning! Camel ahead! Photo by Lauren Gabelhouse.
HTML and CSS:
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.
Return to the top of the page.
Complete list of publications Top of the page
Chronologically ordered list of articles, guides, stories, poems...
- Deep blue sky - aticle, 2006.
- Paklenica - Croatian national park - aticle, 2006.
- CSS preloading - guide, 2006.
- Cheating Google - article, 2006.
- Dubravko Mataković - interview, 2006.
- Sky giants - hot air balloons - article, 2006.
- Stipe Božić - interview, 2005.
- Tillmann Waldthaler - interview, 2005.
- Cannondale P-bone - review and modification, 2004.
- FSA Orbit Extreme Pro headset - review, 2004.
- Adapter for bicycle forks - article, 2004.
- Bumblebees - article, 2004.
- Ticks - article and experiment, 2003.
- Taking apart Shimano XT integrated shifters - article, 2003.
- Smiley :-) - article, 2003.
- 235 - story, 1997.