Home arrow JavaScript arrow 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
(Page 1 of 5 )


Displaying images on a web page is definitely easy. Anyone with a basic grounding in (X)HTML knows how to do this. However, like everything in life, good things come at a cost. If you’re developing a website that requires the display of large images, users with a slow Internet connection will have to wait a long time whenever they want to see a picture. Since this is an old and known issue, a whole range of solutions have been introduced to address it, and image preloaders are currently one of the most common approaches for tackling the problem.

With the massive introduction of JavaScript requesting applications (popularly known as JavaScript requesters), which most of the time are implemented through AJAX, this scenario might change. As you know, the interesting thing about JavaScript requesters is their wide variety of applications in different situations, which implies a huge range of possibilities for handling JavaScript-based http requests with distinct purposes.

Bearing in mind this versatility, this first tutorial will be focused entirely on developing an image preloading application, by utilizing the functionality of the DOM in conjunction with a little help from AJAX. The end result of this experience will be a reusable JavaScript program that can be easily included in your existing scripts, handy for using in a broad range of scenarios, such as image galleries, product catalogs, online image tours, or any application susceptible to being improved with an image preloading script.

Assuming that you’re feeling curious about learning how to preload images in the background, let’s stay out of the preliminaries and begin writing the script. Let’s go!

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials