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:

To get this jQuery-based image preloader up and running, the final step we must take is to bind the previous JavaScript code to the structure of a web page. To keep things uncluttered and easy to follow, in this example I'm going to use the same XHTML document shown in other tutorials of this series, which featured the typical header, content and footer sections.

In summary, the finished version of the preloader will look as follows:

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

$(document).ready(function () {

var images = ['sample_image1.jpg', 'sample_image2.jpg', 'sample_image3.jpg', 'sample_image4.jpg', 'sample_image5.jpg'];

$(images).each(function(key, value) {

var img = new Image();

$(img)

.attr('src', value)

.error(function (){

alert('Error preloading image ' . value);

})

});

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

Done. At this stage, it's safe to say that the image preloader is finally ready to be put into action. So, I suggest that you create your own sample images or simply utilize the ones shown in the first part of the series and give the above script a try on your machine. If you have the chance to use a Firefox extension like Firebug or HTTP Live Headers to examine the set of HTTP requests and headers exchanged between the browser and the web server, you'll see that the preloader works remarkably well.

Final thoughts

Unfortunately, we've come to the end of the series. Nevertheless, the experience has been educational and why not, also fun, since you learned a few useful approaches that can be easily implemented on a web page for preloading images in the background. For obvious reasons, I'd recommend that you use only the ones that don't require you to code additional, non-semantic markup. However, if you feel more comfortable working with JavaScript-based preloaders, make sure they will stick neatly to the rules of progressive enhancement or graceful degradation.

See you in the next web design tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.