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.
Next: Coding the application: dynamically creating thumbnails with the DOM >>
More JavaScript Articles
More By Alejandro Gervasio
/ 7 
