Preload Images Using Javascript

Preload Image is technique which helps browser to render images with minimum delay.

Today we will see example of image gallery. Gallery contain 5 images which load images one after another whenever user clicks next and back button.

This is a basic image gallery scenario which is used in all possible website, then why we need preloaded images for this gallery?

Now a day’s most of website becoming faster and user expectation is increasing.

Suppose your website doesn’t use preload image technique for gallery and a user visits any image gallery from Google Plus or Facebook and visits your website gallery.

Then that user always prefer those websites rather than yours. Why?

Because your website load one image at a time. When user click on next button, then only gallery load image and user has wait till it get loaded.

To avoid this situation gallery needs to download all images first so that browser cached them and when user clicks next button image get fetched from browser cache rather than image server.

Now let look at some programming related stuff

    
// first we create JSON record of images
var imageRecord = ['image1.jpg',
                'image2.jpg',
                'image3.jpg',
                'image4.jpg',
                'image5.jpg'];

// now iterate each JSON record to load image
for (var pos = 0; pos < imageRecord.length; pos++) {

    // create image object
    var image = new Image();

    // assign image path
    image.src = imageRecord[pos];

    // additional stuff
    // some time we need to perform some logic after image load
    // it is hard to remember which image is loaded in a loop 
    // therefore we assign attribute to image which identifies JSON record of that image
    image.setAttribute('img-pos', pos);
                
    // bind load event to image
    Image.onload = function() {

        // get image position
        image.getAttribute('img-pos');

        // perform operation based on fetch image index
    }
}
    
    

Note:

Browser downloads images (other static resource) parallel per hostname. Therefore we can’t predict which image get downloaded first. That is why we added the image position attribute to identify which image is loaded.

If you have only few images then you can use following code

<img src = “image 1” width=”1” height=”1” />

<img src = “image 2” width=”1” height=”1” />

<img src = “image 3” width=”1” height=”1” />

As it occupy only small part of browser and all images get downloaded and cached.

Hope this tutorial post will help you.