Preloading Images with the DOM: The Introductory Process

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!