Home arrow JavaScript arrow Page 2 - Preloading Images with CSS and JavaScript
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
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
February 12, 2010
TABLE OF CONTENTS:
  1. · Preloading Images with CSS and JavaScript
  2. · Using CSS to preload images for a sample web page
  3. · Adding some empty preloaders to the web page
  4. · Working with CSS background graphics

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">

<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</title>

<style type="text/css">

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>

<div id="wrapper">

    <div id="header">

        <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>

    <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>

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials