Preloading Images with the DOM: A Functional Image-Preloading Application
Preloading Images with the DOM: A Functional Image-Preloading Application (Page 1 of 5 )
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.