By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,253 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

What is the better way to preload images?

P: 40
Hi
i have the used the below code to switch the button image on mouseover
and mouseout.
Expand|Select|Wrap|Line Numbers
  1. <html:button property="Button" value="Display" styleClass="displaybutton" 
  2.     onmouseover="this.className='displaybutton displaybuttonover'"
  3.     onmouseout="this.className= 'displaybutton'"/>
  4.  
CSS definition of displaybutton and displaybuttonover is shown below.
Expand|Select|Wrap|Line Numbers
  1. .displaybutton {
  2.   background: transparent url("/images/btnDisplay.gif") no-repeat;
  3.   width:64px;
  4.   padding: 22px 0 0 0;
  5.   overflow: hidden;
  6.   height:17px; 
  7.   border:0; 
  8.   cursor: pointer; /* hand-shaped cursor */
  9.   cursor: hand; /* for IE 5.x */
  10. }
  11.  
  12. .displaybuttonover {
  13.   background: transparent url("/images/btnDisplay_over.gif") no-repeat;
  14. }
  15.  

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
  1. function imagePreloader()
  2. {
  3.  
  4. objImage = new Image();     
  5.  
  6. var buttons=new Array('btnDisplay_over.gif');
  7.  
  8.  for(i=0;i<buttons.length;i++)
  9. {
  10. objImage.src='/images/'+buttons[i];
  11.  
  12. }
  13. }
  14.  
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 .
Sep 1 '08 #1
Share this Question
Share on Google+
3 Replies


100+
P: 210
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
  1. function imagePreloader()
  2. {
  3.  this.objImage = [];
  4.  
  5.  var buttons=new Array('btnDisplay_over.gif');
  6.  
  7.  for(var i=0;i<buttons.length;i++)
  8.  {
  9.   this.objImage[i] = new Image();     
  10.   this.objImage[i].src='/images/'+buttons[i]; 
  11.  }
  12. }
Sep 2 '08 #2

Dormilich
Expert Mod 5K+
P: 8,639
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)
Sep 2 '08 #3

P: 40
Thank you for the reply. Will definitly make use of them and reply back
Sep 18 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.