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

Before I begin writing the rest of the script, let’s have a quick look at the existing functions, so it will be much easier to integrate previously-written code with the remaining script functions. Here’s the first half of the functions, as they were originally defined:

// send http request
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);
}
// check request status
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';
    }
}
// create thumbnails
function createThumbnails(numpics){
    for(var i=0;i<numpics;i++){
        var cdiv=document.createElement('div');
        cdiv.className='thumbnail';
        var a=document.createElement('a');
        a.setAttribute('href','#');
        a.setAttribute('id',i);
        // create thumbnails
        var img=document.createElement('img');
        img.setAttribute('width','120');
        img.setAttribute('height','77');
        img.setAttribute('border','0');
        img.setAttribute('src','thumbnail'+(i+1)+'.jpg');
        img.setAttribute('alt','click to enlarge');
        a.appendChild(img);
        cdiv.appendChild(a);
        document.getElementsByTagName('body')[0].appendChild(cdiv);
        // assign 'onclick' event handler to <a> elements
        a.onclick=function(){
 // preload all images when the first image is clicked
 // or display the proper image
 (!loaded)?sendRequest(this.id,'images.xml'):displayImage(this.id);        
        }
    }
}

Having listed all the functions that you saw in the previous article, here’s the  definition of the XML file that stores the name of the images for display:

<?xml version="1.0" encoding="iso-8859-1"?>
<pictures>
<image>image1</image>
<image>image2</image>
<image>image3</image>
<image>image4</image>
</pictures>

At this point, and with all the previous functions already listed, I can move forward to coding the rest of the script. So, bear with me and keep reading.