What is the better way to preload images?

Revathi Balakrishnan · #1 September 1st, 2008, 08:50 AM

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

Expand|Select|Wrap|Line Numbers

 
<html:button property="Button" value="Display" styleClass="displaybutton" 

    onmouseover="this.className='displaybutton displaybuttonover'"

    onmouseout="this.className= 'displaybutton'"/>

CSS definition of displaybutton and displaybuttonover is shown below.

Expand|Select|Wrap|Line Numbers

 
.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.

Expand|Select|Wrap|Line Numbers

 
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 · #2 September 2nd, 2008, 02:01 AM

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:

Expand|Select|Wrap|Line Numbers

 function imagePreloader()

{

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

 {

  this.objImage[i] = new Image();     

  this.objImage[i].src='/images/'+buttons[i]; 

 }

}

Dormilich · #3 September 2nd, 2008, 06:59 AM

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 · #4 September 18th, 2008, 03:46 PM

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

What is the better way to preload images?

re: What is the better way to preload images?

re: What is the better way to preload images?

re: What is the better way to preload images?

/bytes/development

/bytes/it

/bytes/about