[Javascript] RE: Javascript digest, Vol 1 #829 - Image preload problem

Senior, Henry (TWIi London) HSenior at twii.net
Mon Dec 9 06:46:32 CST 2002


I have the same problem and would be very interested in answers.

One cause for this may be browser settings: if your browser is set up to
check for new versions every time then it will check for the last modified
date whatever.
As far as I understand it, with this setup (I am talking IE here and I
imagine this will vary from browser to broswser) the cached/preloaded image
will not appear until the browser has contacted the server and verified that
the cached version is in fact the newest one.

Also, again as far as my understanding goes (I have not had the time to
speak to my hosting colleagues about this but will do) if the server sets an
expires period/date then this may force the browser to reload images more
often than necessary.


My image preload script doesn't work!

Images 1aboutus.gif, 2services.gif  etc. are the graphic files for the menu 
options (i.e. buttons with the text "
About Us", "Services" etc.).

Images 1.gif to 7.gif contains icons that are displayed in the same place 
no matter what menu option
the mouse cursor is pointing at (onmouseover). nada.gif is the image being 
displayed onmouseout.

When you move the mouse cursor over the different menu options the icon 
shifts depending on which
menu option you're doing an onmouseover for.

The purpose of the script is to preload all images (menu options but 
particularly icons) so that the
browser won't access the internet on every single onmouseover and
onmouseout.

But it doesn't work! The browser accesses the internet every single time I 
do an onmouseover or
onmouseout. What have I done wrong???


The script
-------------


SCRIPT LANGUAGE="JavaScript">
<!-- Begin

image0 = new Image();
image0.src = "http://www.theurltomysite.se/images/menu/nada.gif";

image1 = new Image();
image1.src = "http://www.theurltomysite.se/images/menu/1aboutus.gif";

image2 = new Image();
image2.src = "http://www.theurltomysite.se/images/menu/2services.gif";

image3 = new Image();
image3.src = "http://www.theurltomysite.se/images/menu/3rates.gif";

image4 = new Image();
image4.src = "http://www.theurltomysite.se/images/menu/4newsletter.gif";

image5 = new Image();
image5.src = "http://www.theurltomysite.se/images/menu/5englishcorner.gif";

image6 = new Image();
image6.src =
"http://www.theurltomysite.se/images/menu/6testyourenglish.gif";

image7 = new Image();
image7.src = "http://www.theurltomysite.se/images/menu/7contactus.gif";

image8 = new Image();
image8.src = "http://www.theurltomysite.se/images/menu/1.gif";

image9 = new Image();
image9.src = "http://www.theurltomysite.se/images/menu/2.gif";

image10 = new Image();
image10.src = "http://www.theurltomysite.se/images/menu/3.gif";

image11 = new Image();
image11.src = "http://www.theurltomysite.se/images/menu/4.gif";

image12 = new Image();
image12.src = "http://www.theurltomysite.se/images/menu/5.gif";

image13 = new Image();
image13.src = "http://www.theurltomysite.se/images/menu/6.gif";

image14 = new Image();
image14.src = "http://www.theurltomysite.se/images/menu/7.gif";

// End -->
</script>






part of the the menu code:
----------------------------------


<a href="/about_us/" 
onmouseover="image0.src=image8.src='http://www.theurltomysite.se/images/menu
/1.gif';" 
onmouseout="image0.src='http://www.theurltomysite.se/images/menu/nada.gif';"
><img 
name="image1" src="http://www.theurltomysite.se/images/menu/1about.gif" 
border="0" class="opacity1" onmouseover="this.className='opacity2'" 
onmouseout="this.className='opacity1'" WIDTH="75" HEIGHT="21" ALT="About 
Us"></a>
<a href="/services/" 
onmouseover="image0.src=image9.src='http://www.theurltomysite.se/images/menu
/2.gif';" 
onmouseout="image0.src='http://www.theurltomysite.se/images/menu/nada.gif';"
><img 
name="image2" src="http://www.theurltomysite.se/images/menu/2services.gif" 
border="0" class="opacity1" onmouseover="this.className='opacity2'" 
onmouseout="this.className='opacity1'" WIDTH="62" HEIGHT="21" 
ALT="Services"></a>



--__--__--

_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript


End of Javascript Digest


DISCLAIMER - The preceding e-mail message (including any attachments)
contains information that may be confidential, may be protected by the
attorney-client or other applicable privileges, or may constitute non-public
information.  It is intended to be conveyed only to the designated
recipient(s) named above.  If you are not an intended recipient of this
message, or have otherwise received it in error, please notify the sender by
replying to this message and then delete all copies of it from your computer
system.  Any use, dissemination, distribution, or reproduction of this
message by unintended recipients is not authorized and may be unlawful. The
contents of this communication do not necessarily represent the views of
this company.



More information about the Javascript mailing list