JAVASCRIPT

Preloading Images with CSS and JavaScript

While this principle is well known among web developers and designers, it’s worth repeating: never assume that a web site's users will wait patiently for its contents to be delivered. In a world where data must be rendered to the consumer as fast as possible, making this assumption can literally kill any web project, regardless of its size. This multi-part series will show you how to speed up the loading of images on a web site.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 7

February 12, 2010

TABLE OF CONTENTS:

print this article

SEARCH DEVARTICLES

Preloading Images with CSS and JavaScript - Using CSS to preload images for a sample web page
(Page 2 of 4 )

The first image preloading technique that I plan to cover in this first part of the series will rely entirely on the functionality of CSS to do its thing. It is partially inspired by the set of preloading methods developed originally by Jeff Starr.

Having clarified that point, here's the group of sample images that I'm going to use from this point onward to implement each preloading technique that will be covered in the series:

Well, I have to admit that these images don't speak very well of my current graphic skills, but they do come in handy for recreating a fictional scenario where they need to be displayed on a web page. In a typical situation, achieving this would be as simple as coding the following XHTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Preloading images using the width and height CSS properties</title>

body {

padding: 0;

margin: 0;

background: #000080;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

/* main containers */

#wrapper {

width: 960px;

margin: 0 auto;

background: #eee;

}

#header, #content, #footer {

padding: 30px;

}

/* sample images */

img {

padding: 10px;

background: #fff;

border: 1px solid #ddd;

}

</style>

</head>

<body>

<h1>Preloading images with CSS</h1>

<h2>Header section</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<h2>Main content section</h2>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

So far, nothing unexpected is happening here, is it? Basically, the above web page is comprised of the classic header, content and footer sections, and if all goes well, the previous images will be properly displayed within the main content area. Now, suppose for a moment that you need to implement some form of preloading mechanism that lets users view the pertinent images with no visible delay. The question is: can this be done using only CSS?

The answer is a definite yes, though some of these CSS-based methods are certainly more rudimentary and "dirtier" than others. In this case, based on the web page coded previously, it'd be relatively easy to include into its markup some empty containers. These containers would act like preloaders for each of the images shown before. This could be done by hooking the images to the preloaders as background graphics via CSS, though this process would require one to code additional, non-semantic markup.

But before I hear your loud complaints, keep in mind that this is only an initial approach; it can be greatly refined afterward. Thus, in the section to come I'm going to add to the earlier web page the aforementioned image preloaders, which hopefully will help you understand the underlying logic of this preloading method.

Now, click on the link below and read the following segment.

Next: Adding some empty preloaders to the web page >>