Home arrow JavaScript arrow Page 5 - 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 - Preloading images in the background: defining the “preloadImages()” function
(Page 5 of 5 )

As usual when working with asynchronous http requests, the core logic of most scripts is handled by the function attached to the “onreadystatechange” event handler. In this case, I’ve specified the “statusChecker()” function as the piece of code that checks for the progress in requesting the “images.xml” file, by triggering the “preloadImage()” function after this file has been fetched from the server. Thus, first I’ll list the “statusChecker()” function, and second show the code for “preloadImages()”. Here are the pertinent functions:

function stateChecker(elemid){
    // if request is completed
    if(xmlobj.readyState==4){
        // if status == 200 display text file
        if(xmlobj.status==200){
            // preload images
            preloadImages();
 // display image
 displayImage(elemid);
 loaded=true;
        }
        else{
            alert('Failed to get response :'+ xmlobj.statusText);
        }
    }
}
// preload images
function preloadImages(){
    // get image collection
    var imgcol=xmlobj.responseXML.getElementsByTagName('image');
    for(var i=0;i<imgcol.length;i++){
        // preload images
        pics[i]=new Image();
        pics[i].src=imgcol[i].firstChild.nodeValue+'.jpg';
    }
}

By dissecting the above listed functions, the program flow is quite easy to  follow. After the XML file has been successfully read, the corresponding images are actually preloaded within the “preloadImage()” function. Notice how the contents of all the <image> nodes are stored and buffered as image objects in the “pics” array:

var imgcol=xmlobj.responseXML.getElementsByTagName('image');
for(var i=0;i<imgcol.length;i++){
    // preload images
    pics[i]=new Image();
    pics[i].src=imgcol[i].firstChild.nodeValue+'.jpg';
}

This expression brings up to my mind an old favorite: image-based mouseovers. That’s one of the funniest things about AJAX, since it allows you to implement old techniques from a relatively new conception. By returning to the script, the line:

pics[i].src=imgcol[i].firstChild.nodeValue+'.jpg';

acts as the real preloader for each of the large images that will be displayed. Isn’t it good to reuse old concepts in modern applications?

At this point, the preloading script is capable of creating the thumbnails, and then buffering all the large images from an XML file, whenever a user clicks on the image he or she wants to see. However, there are some functions remaining which need to be defined and explained. That’s where the last part of this series comes in, since I’ll be writing down the rest of the script, so you can use it in your web applications.

Bottom line

Having written some of the core functions that compose the image preloading script, it’s time to pause for a while and recapitulate the concepts and examples  deployed above. Hopefully, I’ve provided you with a hands-on example for preloading images with the DOM and AJAX. Even when the script may not meet all your needs, it can be used as an introductory process for building more complex applications.

As I mentioned before, the last part of this series will be oriented to developing the remaining script functions, required for displaying large images. In the meantime, play around with the code and enjoy!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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