Home arrow JavaScript arrow Preloading Images with the DOM: A Functional Image-Preloading Application

Preloading Images with the DOM: A Functional Image-Preloading Application

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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 15
November 09, 2005
  1. · Preloading Images with the DOM: A Functional Image-Preloading Application
  2. · Refreshing code: A quick look at the existing script functions
  3. · Building image containers: defining the “createImageContainer()” function
  4. · Displaying enlarged images: coding the “displayImage()” function
  5. · Gluing the pieces: turning the application into a functional AJAX-based preloader

print this article

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.

Now that you know the driving logic behind the image preloader, it’s time to start coding the remaining JavaScript functions.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials