JAVASCRIPT

Using jQuery to Preload Images with CSS and JavaScript

If you’re a web designer searching for a guide to implementing the most common graphic preloading methods available nowadays, then you've come to the right place. This five-part article series lets you accomplish this task by utilizing either a few basic style sheet properties or the functionality provided by client-side scripting. In this fifth part of the series, we'll employ the jQuery JavaScript library to assist in preloading our images.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 6

March 01, 2010

TABLE OF CONTENTS:

As I mentioned, implementing a basic image preloader using plain JavaScript is an extremely simple task. It only requires doing some DOM manipulation and nothing else. The full details of this process were covered in the previous part of the series, but in case you still haven't read that installment, below I listed for you the source code corresponding to this particular example. Here it is:

<!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 plain JavaScript</title>

// check to see if the browser accepts images and understands the DOM

if (document.images && document.getElementById && document.getElementsByTagName) {

// preload images

var image1 = new Image();

image1.setAttribute('src', 'sample_image1.jpg');

var image2 = new Image();

image2.setAttribute('src', 'sample_image2.jpg');

var image3 = new Image();

image3.setAttribute('src', 'sample_image3.jpg');

var image4 = new Image();

image4.setAttribute('src', 'sample_image4.jpg');

var image5 = new Image();

image5.setAttribute('src', 'sample_image5.jpg');

}

</script>

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 using plain JavaScript</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>

As the above code fragment demonstrates, the implementation of a basic image preloading mechanism with JavaScript is a two-step process. It demands, first, the creation of a new image object for each graphic being loaded, and second, filling the object with the image in question, in this case using the "src" attribute. Is there anything simpler to grasp than this approach? I don't think so.

But before you move on, let's analyze the previous script more closely. Obviously, there's plenty of room to improve it and make it slightly more flexible. The first enhancement that comes to my mind is the inclusion of an iterator that allows you to traverse collections of image objects for easier manipulation.

Logically, this can be done using native JavaScript methods and properties, but in this case I'm going to show you how to produce the same result with jQuery. This will not only make the whole preloading process a bit more abstract, but it'll permit you to handle potential errors, at least at a basic level.

To see how I plan to develop this jQuery-based image preloader, click on the link below and read the following section.

Next: Abstract the image preloading process with jQuery >>