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. |
/ 7 
