Home arrow JavaScript arrow Page 3 - 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 - Building image containers: defining the “createImageContainer()” function
(Page 3 of 5 )

As you probably remember, after all the images have been preloaded into memory, it’s necessary to display the zoomed-in picture corresponding to the thumbnail that was clickedn. Considering that each image will require a wrapping element within the Web document, before displaying the pertinent picture, I’ll define a simple function, “createImageContainer()”, which will be responsible for creating a DIV element, in order to house the picture itself, together with the window-closing paragraph. Here is what this function looks like:

function createImageContainer(){
    // create image container
    var cdiv=document.createElement('div');
    cdiv.setAttribute('id','container');
    var img=document.createElement('img');
    img.setAttribute('width','400');
    img.setAttribute('height','277');
    img.setAttribute('id','largepic');
    // create 'close' paragraph
    var p=document.createElement('p');
    p.appendChild(document.createTextNode('Close window[-]'));
    cdiv.appendChild(p);
    cdiv.appendChild(img);
    document.getElementsByTagName('body')[0].appendChild(cdiv);
    p.onclick=function(){
        this.parentNode.parentNode.removeChild(this.parentNode);
    }
}

Having defined the above function, let’s break down its code into pieces and see how it works. First, the function begins creating the containing <div> element, along with an <img> element. Then, it assigns some attributes to the elements just created, such as ID for the DIV, as well as “width” and “height” for the image. Surely, you’re wondering what the reason is for including an <img> element. If you’re used to working with old image swappers, the answer is pretty straightforward, since the script will switch between images by manipulating their “src” attribute. See how old techniques are merged with modern technology? 

Now, returning to the remaining code, it’s fairly self-explanatory. As you can see, a <p> element is created on top of the containing <div>, in order to provide users with a simple control for removing the image they're seeing from the document. By studying the last lines of the function, the <div> element is removed through the following expression:

p.onclick=function(){
    this.parentNode.parentNode.removeChild(this.parentNode);
}

Having illustrated the way that the script builds in the containing element for displaying large images, the next step will be defining a function that shows zoomed-in pictures. Thus, join me in the next section to find out how this process is carried out.


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