Background loading of image to cache by using JavaScript image object

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();
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.

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

objImage = new Image();

function download(){
// preload the image file

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


<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()">

Subscribe to our YouTube Channel here


* indicates required
Subscribe to plus2net

    More on JavaScript Image Object
    Image SlideShow Script using navigational buttons
    Image Loading to cache while page load by Image object
    Reloading the image without refreshing the page
    Image Rotator Script for automatic Slideshow
    Image Move across by button click
    Image Move continuously across screen
    Image offSetLeft and offSetTop to get position of the image from left and top
    Image Position : Positioning an image by assigning value to and style.left
    Image width: Managing width of the image
    Image height: managing height of the image
    Image align: Image align left or right
    Image border: adding and removing border from Image
    Image alt: updating or reading alt message of image

    Post your comments , suggestion , error , requirements etc here .

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer