Preloading Images with the DOM: A Functional Image-Preloading Application
(Page 1 of 5 )
Here we are again. Welcome to the last part of the series “Preloading images with the DOM”. By utilizing a hands-on example, this series demonstrates how you can use a JavaScript http requesting script for preloading images in the background, based on the handy capabilities of AJAX and the DOM for fetching and processing files, without having to deal with traditional page reloads.
Introduction
Returning for a moment to the previous article, I went through the development of a script capable of creating a simple gallery of thumbnail images, allowing a user to select any of them for viewing the corresponding zoomed-in picture. Of course, the functionality of the script wasn’t only this, but included preloading all the larger images into a buffer whenever the visitor clicked on any of the thumbnails. The final result was the display of zoomed-in pictures with almost no delay between them, since they were previously buffered.
As you probably remember, I wrote some functions aimed at dynamically displaying thumbnails, as well as fetching image data from an XML file for preloading pictures in memory. Considering that these functions were in turn properly explained, in this last part of the series, you will find out how the remaining functions will be defined, and then see by a practical example how the original script will be turned into a fully functional image-preloading application.
By the end of the tutorial, you’ll be provided with all the supporting files for download, so you can quickly start using the script, either by implementing its original version or introducing some changes on your own.
Now that you know the driving logic behind the image preloader, it’s time to start coding the remaining JavaScript functions.
Next: Refreshing code: A quick look at the existing script functions >>
More JavaScript Articles
More By Alejandro Gervasio
/ 10 
