Advertisements
In this second part of a series, I show you how to implement another primitive CSS-based method that allows you to preload a set of images on a web page. This technique uses the "display" CSS property to hide the preloaders. Note that it needs to make use of additional and non-semantic markup. If you think you can live happily with this issue, then feel free to give it a try.
Among the variety of client-side techniques that can be used nowadays for improving the performance of websites, there's a few that only require an average background in style sheets and JavaScript. Yes, as the title of this article clearly suggests, in this case I'm referring to a set of basic methods that permit you to preload multiple images in the background on a web page, so users can view them on the browser with no noticeable delay.
As with many other approaches that exist in the field of advanced web design, image preloading (also known in design patterns' jargon as eager loading) is worth careful evaluation, and should be applied consciously. For obvious reasons, prefetching groups of heavy graphics behind the scenes isn't something that you'll want to do in every possible case, so caution should be uppermost in your mind if you're planning to implement some kind of preloading mechanism on your own web pages.
That said, it's time to review the topics covered in the previous tutorial. In that first part of the series, I explained how to use the "width" and "height" CSS properties in a rather tricky way to preload a set of sample images on a basic XHTML document. While this method worked decently well, it required the coding of a few additional empty divs. This is a big annoyance, since the W3C emphasize that each element on a web page must always have a semantic meaning.
On the other hand, however, I have to stress that the method can be enhanced by getting rid of those ugly and non-semantic containers. But in fact I'm getting ahead of myself, since these improvements will be discussed in depth in upcoming articles. For the moment, in this second installment of the series I'm going to show you how to implement a variation of the image preloading method mentioned above, which this time will make use of the "display" CSS property to work as expected.
Want to see how this method will be developed? Them go ahead and begin reading!
As I explained in the introduction, in the first page of this series I demonstrated that preloading a set of sample images using only CSS and some empty containers is a straightforward process that can be tackled with only minor hassles.
Just as a review, I reintroduced the example developed then, which will hide from view the preloaded images by assigning a value of 0 to the dimensions of their respective containers. Here's a simple implementation of this trivial preloading method:
<!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 width and height CSS properties (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;
width: 0;
height: 0;
}
#preloader2 {
background: url("sample_image2.jpg") no-repeat;
width: 0;
height: 0;
}
#preloader3 {
background: url("sample_image3.jpg") no-repeat;
width: 0;
height: 0;
}
#preloader4 {
background: url("sample_image4.jpg") no-repeat;
width: 0;
height: 0;
}
#preloader5 {
background: url("sample_image5.jpg") no-repeat;
width: 0;
height: 0;
}
/* 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, the logic driving this method is very simple, not to say simplistic, as it preloads a set of five images behind the scenes by assigning them via CSS as background graphics to the same number of empty divs. While it's worth pointing out that this method will work as one might expect, unfortunately its most serious drawback is that it uses chunks of non-semantic XHTML for prefetching the images.
Despite this issue, you should keep in mind that this is a work in progress; consequently, there's plenty of room for improving the previous preloading method. For the moment, though, I'm going to continue exploring some of its most interesting facets, which will make you more familiar with its pros and cons.
Given that, in the following segment you'll learn how to create a handy variation of the technique discussed above, which will use the "display" CSS property for hiding the sample images from view.
Now, click on the link below and keep reading.
As you may have noticed in the example shown in the preceding section, once the target images have been preloaded in the background, their respective containers are hidden from display thanks to reducing their respective dimensions to 0. Of course, this is merely a tricky way to use the width and height CSS properties, but of course there are a few other ways to make an HTML element "invisible."
One of the simplest ways to achieve this is by assigning a "display: none" style to the element, which you've probably done hundreds of times before. Considering that this approach produces the same result with fewer lines of code, it'd be pretty useful to implement it with the earlier method, right? Well, the following CSS snippet does exactly that. Check it out:
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;
}
That was really easy to code and read, wasn't it? As you can see, now the corresponding preloaders have been hidden from display thanks to the utilization of the "display" property, which saves us from writing more code. On the other hand, the rest of the styles assigned to other elements of the web page remain exactly the same, so I'm not going to waste your time explaining what they do in this particular case.
Even though the implementation of this preloading method is slightly different from the one discussed in the first part of the series, its inner working hasn't changed at all. This implies that putting the method to work is only a matter of including the above CSS styles in the same sample web page.
That's precisely what I'm going to do in the next few lines. Thus, to learn more about this process, read the next segment. It's only one click away.
If you're anything like me, you want to see how the CSS styles coded in the earlier segment can be used for preloading in the background the same set of sample images. Well, below is a web page that hooks the images in question to a group of empty divs:
<!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>
Frankly speaking, this preloading technique doesn't bear any further explanation, since its driving logic is identical to the approach discussed in the previous tutorial. As the above code sample illustrates, the set of preloaders have been hidden on screen via the "display" property, but naturally it's possible to use different properties and get exactly the same result. In this case, choosing a particular implementation of the same preloading method is only a matter of personal preference, so feel free to pick the one that best suits your needs.
Final thoughts
That's all for now. In this second episode of the series, I showed you how to implement yet another primitive CSS-based method that allowed you to preload a set of images on a web page. Even though this technique used the display CSS property for hiding the preloaders from display, it still suffers from a major pitfall, as it needs to make use of additional and non-semantic markup. If you think that you can live happily with this issue, then feel free to give it a try.
As I said before, though, it's possible create an efficient preloading mechanism that doesn't demand using empty containers at any point. Surely, you'll be wondering how this can be done, right? Well, provided that a web page will always contain different portions of meaningful markup, it's feasible to use them as hooks for prefetching graphics in the background in a straightforward fashion. In the forthcoming part of the series, I'm going to discuss how to implement this brand new approach, so you can start using it in your own web projects.
