Preloading Images with the DOM: The Introductory Process

(Page 1 of 5 )

If you have a website that displays a lot of images (particularly large images), your visitors with slow Internet connections may find themselves drumming their fingers as they wait for these images to load. Fortunately, there are a number of solutions to this problem. This article shows you how to develop a reusable JavaScript image preloading application, with help from the DOM and AJAX.

Introduction

Displaying images on a web page is definitely easy. Anyone with a basic grounding in (X)HTML knows how to do this. However, like everything in life, good things come at a cost. If you’re developing a website that requires the display of large images, users with a slow Internet connection will have to wait a long time whenever they want to see a picture. Since this is an old and known issue, a whole range of solutions have been introduced to address it, and image preloaders are currently one of the most common approaches for tackling the problem.

With the massive introduction of JavaScript requesting applications (popularly known as JavaScript requesters), which most of the time are implemented through AJAX, this scenario might change. As you know, the interesting thing about JavaScript requesters is their wide variety of applications in different situations, which implies a huge range of possibilities for handling JavaScript-based http requests with distinct purposes.

Bearing in mind this versatility, this first tutorial will be focused entirely on developing an image preloading application, by utilizing the functionality of the DOM in conjunction with a little help from AJAX. The end result of this experience will be a reusable JavaScript program that can be easily included in your existing scripts, handy for using in a broad range of scenarios, such as image galleries, product catalogs, online image tours, or any application susceptible to being improved with an image preloading script.

Assuming that you’re feeling curious about learning how to preload images in the background, let’s stay out of the preliminaries and begin writing the script. Let’s go!

Next: Setting up the basic scenario: building thumbnails and preloading large images >>
 

More JavaScript Articles
More By Alejandro Gervasio

Comments On: Preloading Images with the DOM: The Introductory Process

· The first part of this series goes through the development of an AJAX-based image...    · Hi Alejandro, I haven't had time yet to try this idea, but I wanted to drop a...    · Thank you for commenting on my article. I really appreciate it. With reference...    · Though I can't recreate in my homepage, I still think this is an great idea. Would...    · Thank you for commenting on my AJAX article. Unfortunately, I can't upload a demo...   >>> Post your comment now!