Home arrow JavaScript arrow Page 3 - 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 - Coding the application: dynamically creating thumbnails with the DOM
(Page 3 of 5 )

 

Due to the fact that thumbnails will be displayed by using the DOM to alter the document tree, the first function to be defined is “createThumbnails()”, which accepts as a parameter the number of pictures to be created. Its definition is as follows:

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);        
        }
    }
}

As you may have guessed, the function above is tasked with building the thumbnails once the whole page has been loaded. Stripped down to its bare bones, this function will fetch a given number of small images (for this example it will be only four pictures), which will be contained into a DIV element. Finally, they’ll be appended to the web document, by using the <body> element as the starting node to hook up the structure just created. However, if you’ve already predefined another element as a new insertion point, you may use it with minor difficulties.

At this point, I should take for granted that adding thumbnail images with the DOM is pretty familiar to you. There’s still a crucial point to be studied within the above script though. Notice the piece of code below:

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);        
}

As you can see, the function assigns an “onclick” event handler to each <a> element that houses a thumbnail, so it will invoke either the “sendRequest()” or “displayImage()” functions, according to the value of the “loaded” flag. What this means is that the first time the user clicks on a thumbnail (loaded=false), all the big images will be fetched from the server by using a simple XML file as the containing structure for storing image names. Otherwise, if the pictures have been preloaded (loaded=true), the “displayImage()” function is called up, passing into it the ID of the <a> element that triggered the event, and only the image tied to the thumbnail will be displayed.

As you might guess, you can use a database table for directly fetching the images instead of an XML file, or even dynamically build the path and name of the picture to be displayed. As I explained before, the script can be easily modified to fit particular needs.

For the moment, I’ve demonstrated how thumbnails are created once the web document has been loaded, in addition to explaining the way that program flow is moved after checking whether all of the images have been properly preloaded. Considering this, the next step in the development of the application consists of having a quick look at the “sendRequest()” function, together with the definition for the XML file that stores the pertinent image names. So, scroll down the page to learn how this is done.


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