Image preloading is the concept comes in a consideration for websites those are image-heavy or in simple term, having lots of images like photo gallery or image based catalog. For image based catalog when the browser tries to download image sometimes sluggish behavior can occur because of slow connection or low bandwidth.
Image preloading can solve this problem by downloading the images before the viewer has requested them and images will be cached and instantly available when they are needed.Let’s see how you can do Image preloading for your application using javascript.
HOW TO IMPLEMENT PRELOADING :
1) Create array of images or array of objects containing image metadata.
2) Loops through an array or array of objects.
3) Creates a new HTML Image object for each one, and assigns a URL to its src attribute.
4) As soon as each image object is assigned a src value, the browser will fire off a request to the server and cache the image when it is returned.
As per steps given above this will be the code snippet to preload images
for (var i = 0; i<images.length; ++i) {
var img = new Image();
img.src = images[‘url’];
}
Example:
function preload(images) {
if (document.images) {
var i = 0;
var imageArray = new Array();
imageArray = images.split(',');
var imageObj = new Image();
for (i = 0; i < = imageArray.length - 1; i++) {
imageObj.src = imageArray[i];
}
}
}
preload('img1.jpg,img2.jpg,img3.jpg');
Here img1.jpg, img2.jpg and img3.jpg are images which I want to preload . you can replace these with your image file name. You can have as many files as you want.
One drawback of this method is that the browser will try to download as many images as it can at the same time because code will loop through and request every image almost instantly without waiting to hear back from the server.
THE BETTER WAY:
If you understand the behaviour of your viewers this will be very useful. If you know in catalogue user is seeing items sequentially you can load the images in that same sequence. In that case, you only need the one the viewer wants to see right now. With the sequential download, this image has the full bandwidth to itself and will be ready faster than parallel downloading.
Let’s see the steps:
1) Takes the first image in the array (at index 0), attaches an onload handler, and then requests the image.
2) Only after this image has finished loading does it call the onload handler which then does the same thing for the next image. This continues until all images are loaded.
function preload(imageArray, index) {
index = index || 0;
if (imageArray && imageArray.length > index) {
var img = new Image();
img.onload = function() {
preload(imageArray, index + 1);
}
img.src = images[index][‘url’];
}
/* images is an array with image metadata */
preload(images);
NOTE : AVOID PRELOADING TOO SOON.
Satisfying image loading requests while it is also downloading critical page elements are not good, the best practice is to start preloading after the whole content is loaded. You can use this code snippet to achieve this.
JQUERY:
<script>
$(window).load(function() {
/* Preload code goes here */
});
</script>
JAVASCRIPT:
<script>
function load() {
/* Preload code goes here */
}
window.onload = load;
</script>
The result is that all the navigation, thumbnails, and the single main image are loaded as quickly as possible first before we deal with preloading.
