Advertisements
In this third part of a series, you will learn how to preload a set of images via CSS, without the need to write any additional markup or even deal with empty containers. From all the approaches reviewed so far, I personally find this one to be the cleanest and simplest to implement, so you may want to put it in your toolbox if you're planning to add an effective preloading mechanism to your website.
While preloading heavy graphics on a web page shouldn't be done in every possible case, it's worth the hassle in situations where one or multiple images need to be viewed on the browser with no noticeable lag. A real-world example of this happens when working with large online ads. If users have to wait too long to see the benefits of a specific product or service because the banner takes forever to download, the ad campaign will be doomed to fail from the very beginning.
Fortunately, there are a few straightforward approaches that can be used for prefetching images in the background. Most of them take advantage of the functionality offered by CSS and JavaScript to do their business properly. Obviously, preloading methods that have a strong dependency on client-side scripting are less reliable than the ones that utilize style sheets, but both deserve a close analysis; this can help you evaluate their pros and cons.
To demonstrate how easy it is to preload a set of sample images with CSS, in the two articles that preceded this one I implemented a couple of basic methods that assigned the corresponding images as background graphics to a group of empty divs. While putting these methods to work was truly a breeze, both of them required the coding of additional, non-semantic markup. Conscientious web designers should avoid this whenever possible.
The good news is that it's feasible to develop a CSS-based preloading approach without having to write a single portion of ugly (X)HTML. To prove the veracity of this claim, in this third installment of the series I'm going to set up a method that will use only the existing semantic markup of a web page.
Are you eager to learn the full details of this process? Then start reading right now!
As usual, before I start implementing the approach mentioned in the introduction, I'm going to review the example developed in the previous part of the series, which preloads images but uses a few empty containers.
With that said, here's the web page that uses the empty divs as hooks for prefetching five different images in the background. Look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Preloading images using the display CSS property (additional markup is required)</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #000080;
font: 1em Arial, Helvetica, sans-serif;
color: #000;
}
/* image preloaders */
#preloader1 {
background: url("sample_image1.jpg") no-repeat;
display: none;
}
#preloader2 {
background: url("sample_image2.jpg") no-repeat;
display: none;
}
#preloader3 {
background: url("sample_image3.jpg") no-repeat;
display: none;
}
#preloader4 {
background: url("sample_image4.jpg") no-repeat;
display: none;
}
#preloader5 {
background: url("sample_image5.jpg") no-repeat;
display: none;
}
/* 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>
<div id="wrapper">
<div id="header">
<h1>Preloading images with CSS (additional markup required)</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>
<!-- image preloaders -->
<div id="preloader1"></div>
<div id="preloader2"></div>
<div id="preloader3"></div>
<div id="preloader4"></div>
<div id="preloader5"></div>
</div>
<div id="content">
<h2>Main content 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>
<p><img src="sample_image1.jpg" width="400" height="300" alt="Sample Image 1" /></p>
<p><img src="sample_image2.jpg" width="400" height="300" alt="Sample Image 2" /></p>
<p><img src="sample_image3.jpg" width="400" height="300" alt="Sample Image 3" /></p>
<p><img src="sample_image4.jpg" width="400" height="300" alt="Sample Image 4" /></p>
<p><img src="sample_image5.jpg" width="400" height="300" alt="Sample Image 5" /></p>
</div>
<div id="footer">
<h2>Footer 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>
</div>
</body>
</html>
As you can see from the above code fragment, each sample image is preloaded by assigning it as a background picture to an empty div, which means that it's necessary to code a preloader for each graphic being downloaded, right? Well, while a method like this is pretty straightforward to implement, it can be improved. For obvious reasons, the major enhancement should be the complete removal of the extra markup, but this brings up a challenging question: how can this be achieved without sacrificing the cleanness of the web page's XHTML?
I'm glad you asked! Fortunately, the answer is much simpler than you may think. It's possible to look for existing (and semantic, of course) containers within the web page and use them as hooks for preloading one or multiple images. Naturally, the best way to understand how this approach works is by example, so in the section to come I'm going to code one for you that will make everything clear.
To see how this new preloading method will be developed, click on the link that appears below and keep reading.
To be frank, implementing a graphic preloading method that doesn't require additional markup is much easier to accomplish than developing one that does. This shouldn't be surprising; the logic that drives the former is based on utilizing existing containers within an XHTML document as preloaders for each required image.
To grasp the inner workings of this approach, I suggest you to look at the following CSS snippet, which will prefetch three different images in the background by hooking them to the existing header, content and footer sections of a web page:
body {
padding: 0;
margin: 0;
background: #000080;
font: 1em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
background: #eee;
}
/* the header, content and footer containers are used as hooks to preload images */
#header {
padding: 10px;
background: url("sample_image1.jpg") -9999px -9999px no-repeat;
}
#content {
padding: 10px;
background: url("sample_image2.jpg") -9999px -9999px no-repeat;
}
#footer {
padding: 10px;
background: url("sample_image3.jpg") -9999px -9999px no-repeat;
}
/* sample images */
img {
padding: 10px;
background: #fff;
border: 1px solid #ddd;
}
There you have it. As you can see from the previous example, the sample images have been directly assigned as background graphics to three existing containers identified as "header," "content" and "footer" respectively, which makes it possible to preload the images without having to code any extra markup. Quite probably, the trickiest facet of this approach is the large negative values given to the X and Y coordinates of the images, which permits you to hide them from display very easily.
This simple technique not only allows you to get rid of undesirable chunks of non-semantic (X)HTML, but its flexibility can be used to preload any number of images. The whole process is reduced to finding elements inside the web page that can be utilized as image hooks. It's that easy.
Well, now that you've grasped the logic driving the previous approach, it's time to put it in action, so you can see that it really works. To do that, in the segment to come I'm going to bind the CSS styles that you just saw to the structure of a web page, thus finishing the implementation of this preloading method.
Now, go ahead and read the next few lines.
Definitely, the easiest way to test the efficiency of the preloading method shown in the preceding segment is to include the set of CSS styles defined before into a web page containing the corresponding "header," "content" and "footer" sections. With that idea in mind, below I coded a basic XHTML document that shows the functionality of this approach. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Preloading images using CSS (no additional markup is required)</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #000080;
font: 1em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
background: #eee;
}
/* the header, content and footer containers are used as hooks to preload images */
#header {
padding: 10px;
background: url("sample_image1.jpg") -9999px -9999px no-repeat;
}
#content {
padding: 10px;
background: url("sample_image2.jpg") -9999px -9999px no-repeat;
}
#footer {
padding: 10px;
background: url("sample_image3.jpg") -9999px -9999px no-repeat;
}
/* sample images */
img {
padding: 10px;
background: #fff;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Preloading images using CSS (no additional markup is required)</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>
<div id="content">
<h2>Main content 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>
<p><img src="sample_image1.jpg" width="400" height="300" alt="Sample Image 1" /></p>
<p><img src="sample_image2.jpg" width="400" height="300" alt="Sample Image 2" /></p>
<p><img src="sample_image3.jpg" width="400" height="300" alt="Sample Image 3" /></p>
</div>
<div id="footer">
<h2>Footer 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>
</div>
</body>
</html>
Doesn't this web page look clean and uncluttered? Absolutely. Nonetheless, its actual beauty resides not only in its correct structure, but its ability to prefetch a bunch of images behind the scenes without having to commit the cardinal sin of coding extra preloaders. In summary, you get the best of both worlds.
Needless to say, this approach can be used with any type of HTML element that supports the "background-image" CSS property, so keep it in mind if you want to use it with your own (X)HTML documents.
Final thoughts
In this third part of the series, you learned how to preload a set of images via CSS, without the need to write any additional markup or even deal with empty containers. From all the approaches reviewed so far, personally I found this one to be the cleanest and simplest to implement, so I suggest you to keep it at hand in your toolbox if you're planning to add an effective preloading mechanism to your website.
But wait a minute! Does this mean that CSS is the only way to prefetch images in the background? Good question. In reality, it's feasible to use some JavaScript and get similar results, even at the expense of relying on scripting being enabled on the browser, which as you know is always unsafe. In the forthcoming tutorial, however, I'm going to discuss how to build a simple preloading method that will use plain JavaScript to do its business.
