Home arrow JavaScript arrow Page 4 - Preloading Images with the DOM: The Introductory Process

Preloading Images with the DOM: The Introductory Process

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 13
November 02, 2005
  1. · Preloading Images with the DOM: The Introductory Process
  2. · Setting up the basic scenario: building thumbnails and preloading large images
  3. · Coding the application: dynamically creating thumbnails with the DOM
  4. · Requesting data from the server: fetching images through an XML file
  5. · Preloading images in the background: defining the “preloadImages()” function

print this article

Preloading Images with the DOM: The Introductory Process - Requesting data from the server: fetching images through an XML file
(Page 4 of 5 )

Since requesting files through XMLHttpRequest objects is a topic that I explained in some of my previous articles, I definitely won’t spend a long time explaining how this process is performed. Instead, I’ll briefly show the definition for the “sendRequest()” function, to give you a pretty clear idea of how images will be fetched from the server. Here is the function’s source code:

function sendRequest(elemid,file){
    // check for existing requests
        // instantiate object for Mozilla, Nestcape, etc.
        xmlobj=new XMLHttpRequest();
            // instantiate object for Internet Explorer
            xmlobj=new ActiveXObject('Microsoft.XMLHTTP');
            // Ajax is not supported by the browser
            return false;
    // assign state handler
    // open socket connection
    // send request

As you may have guessed, I’ll use this handy function to read the contents of the XML file containing the names of the images that will be preloaded. Its incoming arguments are the ID of the <a> element that was clicked on (in short, the thumbnail accessed by the visitor), as well as the file to be fetched. For this specific example, I’ll define a basic “images.xml” file, which looks like this:

<?xml version="1.0" encoding="iso-8859-1"?>

Studying the above file, it becomes clear that all the <image> nodes are containers for image names. I’ve purposely coded the file that way, because of the extreme ease provided by AJAX for fetching XML files –- and specifically node values -- by utilizing the “XMLResponse” property of XMLHttpRequest objects. You can also see that the sequence image1, image2…image N isn’t mandatory at all. It’s possible to specify different image names, as long as they meet the rules for well-formed XML files.

Having defined the XML file, which stores image names, along with the function responsible for fetching it, we can move on to writing the next function of the application, “preloadImages()”, which not surprisingly does the work “behind the scenes” for preloading all the large images.

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