Decrease website lag time and improve the overall website functionality with the use of javascript and preloaders.
Preloading Images on Your Website 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:
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. In place of "width" and "height" you would enter the dimensions of your image in pixels minus the "px" and quotation marks. For example:
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 will utilize object detection for simplicity in this article. We want to know if the image object exists, which is 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:
All we are doing is stating if document.images exists then we want to perform the following instructions. 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 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:
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 both scalable and reusable.
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.
Source by Harold Pettegrove
Post a Comment