Preloading Images using Javascript, CSS or Pure HTML

Preloading images is useful when you like to access the images without delay when needed. For example, on mouse-over events over some buttons, the images has to be changed immediately. Preloading loads the images into the client’s (browser) cache, so the next time when images are required, the browse simply loads it from the cache (normally stored on harddisk).

The Preloading can be done in three ways, all are simply effective: via Javascript, CSS or HTML.

Preload Images via Javascript

In Javascript, you can first check if image object is supported by document.images if yes, you can create a Image object and setting its src property and onload  and onerror events. For example,

1
2
3
4
5
6
7
8
9
10

if (document.images) {
    var preload = new Image();
    preload.onload = function() {
        // loaded;
    }
    preload.onerror = function() {
        // error, e.g. file not exists
    }
    preload.src = 'sample.jpg';
}

if (document.images) {
    var preload = new Image();
    preload.onload = function() {
        // loaded;
    }
    preload.onerror = function() {
        // error, e.g. file not exists
    }
    preload.src = 'sample.jpg';
}

The src property of Image object should come after setting onload and onerror events or otherwise the events may not be triggered if the image is already cached.

Of course, you can preload an array of images easily by using this method, e.g. simply creating an array of Image objects in Javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function preload(images) {
    if (document.images) { // https://helloacm.com
        var imageArray = images.split(',');
        var imageObjs = [];
        var imageObj = new Image();
        for(var i = 0; i <= imageArray.length - 1; i ++) {    
            imageObj.src = imageArray[i];
            imageObjs.push(imageObj);
        }
    }
}
 
// example usage:
// preload('image1.jpg,image2.jpg,image3.jpg');

function preload(images) {
    if (document.images) { // https://helloacm.com
        var imageArray = images.split(',');
        var imageObjs = [];
        var imageObj = new Image();
        for(var i = 0; i <= imageArray.length - 1; i ++) {    
            imageObj.src = imageArray[i];
            imageObjs.push(imageObj);
        }
    }
}

// example usage:
// preload('image1.jpg,image2.jpg,image3.jpg');

Using Javascript to preload images gives you more control (you can program the preloading process).

Preload Images via CSS

Defining a class or ID which has a ‘display: none’ or invisible coordinates ‘left: -9999px’, ‘top: -9999px’ saves you from Javascript hassle if you want to preload images. The following is one of the many examples in CSS to preload images.

1
2
3
4
5
6
7
8

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

and

1
2
3

<div id="preloaded-images">
   <img src="image01.jpg" width="1" height="1" alt="Image 01"/>
</div>

<div id="preloaded-images">
   <img src="image01.jpg" width="1" height="1" alt="Image 01"/>
</div>

Preload Images via Pure HTML

In HTML, it is even simpler. It is actually a similar method as CSS. It works if there are only a few images to preload. You have a less control over the preloaded-images by using HTML or CSS, compared to Javascript.

1

<image src="picture.jpg" width="1" height="1" border="0" />

<image src="picture.jpg" width="1" height="1" border="0" />

–EOF (The Ultimate Computing & Technology Blog) —