First, let's discuss the use of the Image() object. Here’s the code:

function preloader() 
{
heavyImage = new Image(); 
heavyImage.src = "heavyimagefile.jpg";
}

The following code preloads heavyimagefile.jpg, ensuring that there is no waiting period when onMouseOver is triggered. If you want to preload many images at once, you can use the following code:

function preloader() 
{

 // counter
 var i = 0;

 // create object
 imageObj = new Image();

 // set image list
 images = new Array();
 images[0]="image1.jpg"
 images[1]="image2.jpg"
 images[2]="image3.jpg"
 images[3]="image4.jpg"

 // start preloading
 for(i=0; i<=3; i++) 
 {
  imageObj.src=images[i];
 }

}

Next, this is very practical, and you often encounter scenarios where you prompt that images are loading before they have completed loading, and then display the images after they are fully loaded. Here’s a demo:

// create an image object
objImage = new Image();

// set what happens once the image has loaded objImage.onLoad=imagesLoaded();

// preload the image file
objImage.src='images/image1n.gif';

// function invoked on image load
function imagesLoaded()
{    
 document.location.href='index2.html';
}

Please wait, loading images...

This should be easy to understand. In the above example, you first create the Image() object, then preload it, and use objImage.onload to execute certain methods after the image has finished loading.

Here’s the original English source for your reference. If you're interested, feel free to check it out. It's quite well-written: http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317