What is the better way to preload images?

[Revathi Balakrishnan]

Hi
i have the used the below code to switch the button image on mouseover
and mouseout.

<html:button property="Button" value="Display" styleClass="displaybutton" 
	onmouseover="this.className='displaybutton displaybuttonover'"
	onmouseout="this.className= 'displaybutton'"/>

CSS definition of displaybutton and displaybuttonov er is shown below.

.displaybutton {
  background: transparent url("/images/btnDisplay.gif") no-repeat;
  width:64px;
  padding: 22px 0 0 0;
  overflow: hidden;
  height:17px; 
  border:0; 
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

.displaybuttonover {
  background: transparent url("/images/btnDisplay_over.gif") no-repeat;
}

but it produced delay in switching the image on mouseover in IE browser alone.

To avoid this delay i thought of using the below code on load to preload the image.

function imagePreloader()
{

objImage = new Image();     

var buttons=new Array('btnDisplay_over.gif');
 
 for(i=0;i<buttons.length;i++)
{
objImage.src='/images/'+buttons[i];

}
}

but i belive this is not good solution, Is there any other effective way to Preload images, because similar to display button, i have large number of buttons in my site, so preloading all of them with imagePreloader( ) function might increase the delay in loading the page. Can any one suggest me a better solution?

Thanks in Advance !!!!
Kindly Notify me if my question is unclear .

[Logician]

If you start the preload operation using the onload event there is no delay in loading the rest of the content, although there will be some delay before the preloaded images become available.

Your code will preload only the last image, since you're reassigning source files to the same Image object.

This is the simplest fix for what you have already:

function imagePreloader()
{
 this.objImage = [];
 
 var buttons=new Array('btnDisplay_over.gif');
 
 for([B]var[/B] i=0;i<buttons.length;i++)
 {
  this.objImage[i] = new Image();     
  this.objImage[i].src='/images/'+buttons[i]; 
 }
}

[Dormilich]

alternatively, you could have a look at the css pseudo class :hover and how you can apply a 'mouseover event' this way (desribed in this article at ALA)

[Revathi Balakrishnan]

Thank you for the reply. Will definitly make use of them and reply back