JavaScript preloading image on page load

While we are downloading any page we can also download images which are not going to be displayed immediately while showing the page. We can show the image by associating with an event and while displaying the content of the page the other image can be downloaded at background. This way the image will be downloaded to cache and then displayed from cache to the browser.

We will be using image object to download the image. One of its property src downloads the image. Here is the image object declaration and then downloading of image.


objImage = new Image();

objImage.src=''https://www.anyserver/image/2326.jpg'';

The above line will download the image to cache, we will try to connect displaying of this image with one event to see how fast the image loads. To do this we will have one simple function like this.


function displayimage(){

document.images['im'].src = 'https://www.anyserver/image/2326.jpg'';

}

Once this function is called the image is displayed through a image tag (name = ) im. We will connect this function to one button onclick event like this.


<input type="button" name="Prev" value=" Show Image " onClick="displayimage()">

To load the images while the page is loading we will use onload event of body tag. Here is the complete code. Replace the image urls of your choice. You will see the first image while page loads and allow some time for the remote image to load. Watch your status bar for messages and downloading of remote image file. Once you click the button the second image will display immediately with out any delay as it comes from the cache. If you are in a slow internet you can see the difference clearly. If you are in a fast net then try to connect to a heavy image to get the difference in speed. These concept will help us in building a JavaScript image slide show. Here is the complete code.


<html>
<head>
<title>(Type a title for your page here)</title>
<script language="JavaScript">

objImage = new Image();

function download(){
// preload the image file
objImage.src=''https://www.anyserver/image/2326.jpg'';
}

function displayimage(){
document.images[''im''].src = ''https://www.anyserver/image/2326.jpg'';
}

</script></head>

<body onLoad="download()">
<form name="f1">


<img name="im" src=https://www.localserver/image/1263.jpg><br>
<input type="button" name="Prev" value=" Show Image " onClick="displayimage()">
</form>
</body>
</html>

Subscribe to our YouTube Channel here

Background loading of image to cache by using JavaScript image object

Subscribe