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

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

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
    if(xmlobj!=null&&xmlobj.readyState!=0&&xmlobj.readyState!=4){
        xmlobj.abort();
    }
    try{
        // instantiate object for Mozilla, Nestcape, etc.
        xmlobj=new XMLHttpRequest();
    }
    catch(e){
        try{
            // instantiate object for Internet Explorer
            xmlobj=new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e){
            // Ajax is not supported by the browser
            xmlobj=null;
            return false;
        }
    }
    // assign state handler
    xmlobj.onreadystatechange=function(){
        stateChecker(elemid);
    }
    // open socket connection
    xmlobj.open('GET',file,true);
    // send request
    xmlobj.send(null);
}

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"?>
<pictures>
<image>image1</image>
<image>image2</image>
<image>image3</image>
<image>image4</image>
</pictures>

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
JAVASCRIPT ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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