• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Content > Preloading Images

Preloading Images

Although the Web is speeding up due to the increasing use of high-speed Internet access, having a Web page that loads quickly is still the first step in creating a positive user experience. One of the chief lags in download time is always going to be the graphic content. Although Web graphics are compressed to minimize their file size, the more graphics you include in a page, the slower it will load.

To speed things along, though, most browsers will store image files in a cache locally on the visitor’s computer and then use the local version of the file if the image is used on another page in the Web site. This can radically speed the appearance of subsequent pages in the site.

Using a simple CSS trick, we can take advantage of the cache to load images invisibly on the home page before they are ever used in the Web site, so that when the visitor travels to a new page, the new images seem to appear almost instantly.

To preload images using CSS:

.hideImage {...}

Set up the class hideImage with only definitions to set the width and height to 0px (Code 4.1). When this class is applied to any element (including an image) it will remove the element completely from the page.

Code 4.1. The .hideImage class simply reduces the size of the image to nothing, so the image loads but does not appear in the page.

→ Transitional//EN" "http://www.w3.org/TR/
→ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
→ xml:lang="en">
        <meta http-equiv="content-type"
        → content="text/html;charset=utf-8" />
        <title>DHTML &amp; CSS Advanced |
        → Preloading Images</title>
        <style type="text/css">
           .hideImage {
								width: 0px;
								height: 0px;
        <p><img src="Alice_1_8.jpg" alt=""
        → height="216" width="186"
        → align="right" border="0">'I should
        → see the garden far better...'<br>
           <img class="hideImage"
           src="Alice_1_7.jpg" alt=""
           width="237" height="216"



Add any images that should appear in the page, and then, after all of the other content on the page, add image tags for the graphics you want to preload, giving them the hideImage class (Figures 4.1 and 4.2).

Figure 4.1. The second image does not appear because its dimensions have been set to 0 pixels, effectively removing it from the page.

Figure 4.2. How the page would appear if the .hideImage calls were not applied.

✓ Tips

  • Although preloading images will speed the download of future pages, it will slow the display of the initial page. However, since these images will download last, the pages should appear to be loaded even though the images are still downloading.

  • Another way to hide images for preloading is to use display:none. However, the CSS standard does not require browsers to load images that have display:none set, so this may not work in all browsers.

  • One trick I will show you in Chapter 6, “Navigation,” uses another trick to load multiple rollover states for graphic buttons.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint