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

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

Preloading Images with the DOM: A Functional Image-Preloading Application - Refreshing code: A quick look at the existing script functions
(Page 2 of 5 )

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.


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