473,698 Members | 2,361 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

What is the better way to preload images?

40 New Member
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'"/>
CSS definition of displaybutton and displaybuttonov er 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. }
  12. .displaybuttonover {
  13.   background: transparent url("/images/btnDisplay_over.gif") no-repeat;
  14. }

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. {
  4. objImage = new Image();     
  6. var buttons=new Array('btnDisplay_over.gif');
  8.  for(i=0;i<buttons.length;i++)
  9. {
  10. objImage.src='/images/'+buttons[i];
  12. }
  13. }
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
3 1887
210 New Member
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 = [];
  5.  var buttons=new Array('btnDisplay_over.gif');
  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
8,658 Recognized Expert Moderator Expert
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
Revathi Balakrishnan
40 New Member
Thank you for the reply. Will definitly make use of them and reply back
Sep 18 '08 #4

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

Similar topics

by: MALdito | last post by:
hi everybody let me say right from the start .. I´m not a coder ... "just" a designer! that said .. here is my question: I´m using dreamweaver´s built in preloader for a menu. it looks like this: function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;
by: Bob | last post by:
I usually use some "pre-load" code in my pages to preload graphics that will be swapped. But, I'm thinking that rather than the long, repetitive, once, for each graphic hardcoded stuff like this: var bb_off = new Image(); bb_off.src = "images/bb_off.jpg"; ....that I could have an array where I just listed the names of the graphics, a loop, and code in the loop that cycles through each entry in the array to create and pre-load the "on"...
by: jmhill | last post by:
Has anyone else had this issue? Basically, the preload of images for a rollover effect for the navigation is really really slow when using IE 6.0 but when i view the site using Netscape, it's fast like it should be(no lag!) My problem is that since 96% of users use IE, i need to figure a way to fix this. Below is the javascript currently being used. The arguments are passed in before the script is called. MM_preloadImages(
by: Albert Spencil | last post by:
I have tried several preload scripts found here; plus, some of my own. The only thing that works is the unsophisticated loading of those tiny images. The download consist of 100+ images amounting to 50+mb; and, normally completes in less than 1 minute without preload (using DSL). The preload terminates after 6 or 7 images and seems to time-out in the middle of an image. A reload will download a few more, etc. I have used the <body...
by: Stacey | last post by:
Hi, I'm hoping for a bit of advise-- I have a (relatively, from the point-of-view of this dilettante) complex script that attempts to preload certain images in order to trigger one of a series of six slideshows (rather than try to articulate, have a look here): http://www.slack.net/~stacey/stestbed/homejs.jsp Clicking any of the six blocks of text along the sides will begin a loop of the corresponding slideshow.
by: shapper | last post by:
Hello, I think to preload an image I should us something like: img = new Image(); img.src = 'images/img.jpg'; Could someone tell me how to create a loop which would preload a list of images? Something like:
by: =?Utf-8?B?Q2FzcGE=?= | last post by:
Is there any way to preload an image returned by an HTTP Handler? My image HTTP handler is generating some thumbnails that I want to preload. thanks Caspa
by: shapper | last post by:
Hello, How can I preload a few images of a page javascript? Should I use CSS to do this? Is it even possible? Thanks, Miguel
by: matt9807 | last post by:
The following is a script that I have written that preloads images for an image gallery. The problem is that the images only preload in Safari, other browsers load each image when it is called. Any ideas? imgSeries = new Array(); curImg = ''; function loadkill() { document.getElementById('loadingtxt').style.display = "none"; document.getElementById('imgone').src = imgSeries; document.getElementById('imgtwo').src = imgSeries; }
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.