Preloading Images With Javascript

Decrease website lag time and improve the overall website functionality with using javascript and preloaders.

Preloading Images on Your Website with Javascript
Fast-loading pages reduce errors, save bandwidth, and please visitors. One method to decrease loading times and enhance performance involves optimizing image screen efficacy. Your mantra for achieving image efficiency should be “reuse, optimize, and preload.” While each of these methods plays an important part, we’ll concentrate on methods for preloading images.

What javascript does is allow you to begin loading the images in the HEAD section of your page, which means that with this technique (unless the pictures are large or great in number) your viewers will have the necessary images in their browser’s cache before the script begins to run. Therefore, an image rollover won’t be as inclined to make the viewers await the browser to download the second image, because it is in their browser’s cache.

To get this going, you will need to have a little section of script in the HEAD section of your page. Here’s a sample of a script that preloads a single image:

First let me explain what is going on.   In the first line we are announcing a new variable “Image01” and telling Javascript it is of type Picture with a width=width and a height=height. Rather than “width” and “height” you’d enter the dimensions of your image in pixels minus the “px” and quotation marks. For example:

//Image width=225px and height=40px

Image01 = new Image(225,40);

//Picture relative URL is image01.png

Image01.src = “image01.png”;

A simple and effective method to get you started on your preloading campaign. However with anything simple it is not too effective. There is a possibility that your audience will come through with an older browser that doesn’t support the image object. So, to be on the safe side you may wish to implement a form of browser or object detection to keep from creating a javascript error on browser. Object and browser detection are beyond the scope of this article but I will offer a fast demonstration.

I will utilize object detection for simplicity in this article. We want to know if the image object is different, which is famous in javascript as “document.images”. We simply must check whether this object exists using a simple if statement, if the items is different then we conduct our preloader, if it does not we do nothing and allow the webpage load as it would. We take our previous code and make one tweak:

All we are doing is stating if document.images exists then we wish to perform the following instructions. If it does not then we do nothing. Here we have it, a simple and efficient preloader with the capability to test for Javascript compatibility.

Our next issues is what if we have multiple images to preload. We could go about this in two manners.

It works but is not great for my needs and it gets rather tedious especially when dealing with a large number of images. Therefore, we will need to find a simple and efficient method that lends itself to being both scalable and reusable.

In our case we added a few new components. Firstly we created a variable “I” that’s our counter and place it value to zero. We created a new object “imageObj” that’s a place holder for graphics we wish to load. We created an array “image” to hold the name of our pictures we wish to preload. Eventually we added a counter that cycles through our array and loads the pictures.

The code is completely scalable, we can use for just one image or one hundred pictures. There you have it, we have our Javascript preloader.

Harold Pettegrove