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.
Next: Requesting data from the server: fetching images through an XML file >>
More JavaScript Articles
More By Alejandro Gervasio
/ 7 
