Home arrow JavaScript arrow Page 2 - Preloading Images with the DOM: The Introductory Process

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

Preloading Images with the DOM: The Introductory Process - Setting up the basic scenario: building thumbnails and preloading large images
(Page 2 of 5 )

An important point prior to beginning the coding of the image preloading application involves defining the sample scenario, to which the image preloader will be applied. Considering that the technique for preloading images will be best understood by utilizing a hands-on approach, first I’ll explain the logic that drives the application, and second write the corresponding code.

In this particular case, the example will be comprised originally of a list of some thumbnail images, which might be an image gallery, a list of products, or whatever item you can imagine as being part of an image collection. Then, thumbnails will be created on the fly by using a few DOM methods, after the structural (X)HTML markup has been loaded. So far, this process includes nothing that is unexpected, because small images will be fetched one at a time.

Now, let me explain how the image preloader works. Since the image collection is rather short, all the larger pictures that correspond to each thumbnail will be fetched silently and placed into a buffer at once, whenever the user clicks on any thumbnail. As a result, large images will be displayed with almost no delays, each time the user accesses the corresponding thumbnail picture, since they’ll be already preloaded.

Of course, this method has some serious limitations worth noting. If the list of images being displayed is extremely huge, the solution is simply unacceptable. However, if you’re using some kind of paginating mechanism to display images in small chunks, preloading images with a single request can certainly be a method worth considering.

From the concepts explained above, it’s easy to understand how the system for preloading images does its business. However, for you to have a clear idea of how it looks, here are some screenshots, which illustrate the way that thumbnails and large images are displayed:

As you can see, the screenshots give a better idea of how the image preloader will be implemented. Given a list of thumbnails, the first time the user clicks on any of them will result in all of the large images being loaded and stored in the buffer. Also, the large image tied to the thumbnail will be displayed on the right side of the screen. In case the user wants to see the remaining pictures, they’ll be displayed with no lags between them. As illustrated in the above pictures, big images will show a paragraph on top with the classic “close window” text, so users are able to remove the appropriate image.

Of course, the above examples are just that. You can go ahead and chose the look and feel that really meets your needs for building the image preloader. Here, I’m providing you with the overall guidelines for developing the programming logic of such an application.

Now that you know how the image preloading application works, as well as what it looks like, the next step will be defining the JavaScript functions responsible for building up the thumbnails. Do you want to know how to do that? Just keep on reading.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials