Home arrow JavaScript arrow Page 4 - 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 - Displaying enlarged images: coding the “displayImage()” function
(Page 4 of 5 )

Fortunately, displaying zoomed-in pictures is a fairly easy thing to do. But in fact, I’m getting ahead of myself. So, let me first define the “displayImage()” function and then I’ll discuss its rationale. Below is its definition:

function displayImage(elemid){
    var cdiv=document.getElementById('container');
    if(!cdiv){createImageContainer()};
    var newpic=pics[elemid];
    var oldpic=document.getElementById('largepic');
    if(!oldpic){return};
    oldpic.setAttribute('src',newpic.src);
}

In order to display a zoomed-in images, the function above will first check for the existence of the “container” <div> element that you just saw in the previous section. Since I want the function to show only one <div> for displaying images, the “createImageContainer()” function will be called up either the first time the user clicks on a thumbnail or when the containing <div> has been removed from the web document. The following line demonstrates this condition:

if(!cdiv){createImageContainer()};

Now, the process for swapping zoomed-in images is performed by utilizing the lines below:

var newpic=pics[elemid];
var oldpic=document.getElementById('largepic');
if(!oldpic){return};
oldpic.setAttribute('src',newpic.src);

There are a couple of things that require our attention here. Notice the new image for display is stored in the “newpic” variable. Then, the old picture is replaced within the container with the new one by manipulating its “src” attribute, as follows:

oldpic.setAttribute('src',newpic.src);

Since all the images were previously preloaded into memory, the swapping process between pictures will be executed with practically no delays. As I explained before, this function looks a lot like a multiple image swapper.

By this point, all the functions of the script have been defined and properly discussed. Keeping in mind that now the script is capable of preloading all the larger images, and displaying each of them with a subtle lag, it’s time to group all the functions into a single snippet and run it after the page has been loaded. Considering this, let’s jump straight into the next section and see how the complete application looks.


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