Preloading Images with Javascript
Fast-loading pages reduce errors, conserve bandwidth, and please visitors. One way to decrease loading times and enhance performance involves maximizing image display efficiency. Your mantra for achieving image efficiency should be “reuse, optimize, and preload.” While each of these methods plays an important role, we will focus on methods for preloading images.
What javascript does is allow you to start loading the images in the HEAD section of your page, which means that with this technique (unless the images are large or great in number) your viewers will have the necessary images in their browser’s cache before the script starts to run. Therefore, an image rollover will be less likely to make the viewers wait for the browser to download the second image, because it is in their browser’s cache.
To get this going, you need to have a small section of script in the HEAD section of your page. Here is a sample of a script that preloads a single image:
<script type=”text/javascript”>
Image01 = new Image(”width”,”height”);
Image01.src = “http://www.example.com/image01.png”;
</script>
First let me explain what is going on. In the first line we are declaring a new variable “Image01” and telling Javascript that it is of type Image with a width=width and a height=height. A quick note about the height and width, in place of “width” and “height” you would enter the dimensions of your image in pixels minus the px and quotation marks that I have used. So if your image is 225×40 pixels, 225px wide and 40px tall then, your value for the width is 225 and the value for height is 40:
//Image width=225px and height=40px
Image01 = new Image(225,40);
The second defines the URL or web address of the image. You would replace this with the URL of your image. Not too bad now, is it?
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 chance your viewer will come through with an older browser which 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 older browser. Object and browser detection are outside the scope of this article but I will provide a quick demonstration I use.
I will utilize object detection as it is quick and requires far less explanation and code. We want to know if the image object exists, which is conveniently known in javascript as “document.images.” We simply need to check whether or not this object exists using a simple if statement, if the objects exists then we run our preloader, if it does not we do nothing and let the webpage load as it would. We take our previous code and make one simple tweak:
<script type=”text/javascript”>
If (document.images) {
Image01.src = “http://www.example.com/image01.png”;
}
</script>
All we are doing is stating if document.images exists then we want to perform the instructions in between these brackets { }. If it does not then we do nothing. Here we have it, a simple and effective preloader with the ability to check for Javascript compatibility.
Our next issues is what if we have multiple images that we wish to preload. We could go about this in two manners. The first is simply taking what we have already done and repeating it as so:
<script type=”text/javascript”>
If (document.images) {
//Image 1
Image01 = new Image(”width”,”height”);
Image01.src = “http://www.example.com/image01.png”;
//Image 2
Image02 = new Image(”width”,”height”);
Image02.src = “http://www.example.com/image02.png”;
//Image 3
Image03 = new Image(”width”,”height”);
Image03.src = “http://www.example.com/image03.png”;
}
</script>
It works but is not ideal for my needs and it becomes rather tedious especially when dealing with a large number of images. Therefore, we need to find a simple and effective method that lends itself to being reusable and scalable.
<script type=”text/javascript”>
If (document.images) {
//variable counter starting point
i = 0;
//create image object
imageObj = new Image;
//create new image array
image = new Array ();
image[0] = “image01.png”;
image[1] = “image02.png”;
image[2] = “image03.png”;
image[3] = “image04.png”;
image[4] = “image05.png”;
image[5] = “image06.png”;
image[6] = “image07.png”;
image[7] = “image08.png”;
//Our preloader
//”i” must be <= to the number of images we wish to load
for (i=0; i <= 8; i++)
{
imageObj.src = image[i];
}
}
</script>
In our example we added a few new elements. Firstly we created a variable “i” that is our counter and set it value to zero. Next, we created a new object “imageObj” that is a place holder for images we wish to load. We created an array “image” to hold the name of our images we wish to preload. Finally we added a counter that cycles through our array and loads the images.
The code is fully scalable, we can use for one image or one hundred images. The only things we have to add or change are the elements in the array and the number “i” is less than or equal to. There you have it, we have our Javascript preloader.
Harold Pettegrove
NorthRockSEO
http://www.northrockseo.com
http://blog.northrockseo.com/article/preloading-images-with-javascript
admin java Images, JavaScript, Preloading
