Preload Images with Javascript working, but very very very slow

Hi,

thank you for taking the time to look at this question.

I have created a website and I want to put it live but the preload Images in Javascript dosen't work so good. I already preloaded the images but when you move the mouse over the flags the images are still a bit slow.

You can take a look at the source code here: http://www.riccy.com/old.old

Or here is the code I use...


<script language="JavaScript" type="text/javascript">
<!--
if (document.images)
{
img1 = new Image();
img2 = new Image();
img3 = new Image();
img4 = new Image();
img5 = new Image();
img6 = new Image();
img7 = new Image();
img8 = new Image();
img9 = new Image();
img10 = new Image();
img11 = new Image();
img12 = new Image();
img13 = new Image();
img14 = new Image();
img1.src = "images/welcome_scroll.gif";
img2.src = "images/leon_head.gif"
img3.src = "images/choose_lang.gif"
img4.src = "images/leon_bottom.gif";
img5.src = "images/bottom_border.gif"
img6.src = "images/welcome_scrolluk_choose_over.gif"
img7.src = "images/uk_choose.gif";
img8.src = "images/welcome_scrollde_choose_over.gif"
img9.src = "iimages/choose_langde_choose_over.gif"
img10.src = "images/de_choose.gif";
img11.src = "images/welcome_scrollit_choose_over.gif"
img12.src = "images/choose_langit_choose_over.gif"
img13.src = "images/it_choose.gif";
img14.src = "images/bottom_border.gif"
}
function changeImages()
{
if (document.images) //Test Browser if supports image Array
{
for (var i=0; i<changeImages.arguments.length; i+=2)
{
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
// -->
</script>


For the mouseover effect i did this:

<a href="#"
onmouseover="changeImages('welcome_scroll', 'images/welcome_scrollde_choose_over.gif', 'choose_lang', 'images/choose_langde_choose_over.gif'); return true;"
onmouseout="changeImages
('welcome_scroll', 'images/welcome_scroll.gif', 'choose_lang', 'images/choose_lang.gif'); return true;">
<img src="images/de_choose.gif" width="30" height="20" border="0" alt=""></a>



Thank you so much
RiccardofcAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
kollegovConnect With a Mentor Commented:
Both pages behalf absolutely the same way in my MIE5
If you rollower before loading of ALL images complete then it start loading again
( for largest animated image )
When you do rollower AFTER all images finished  loaded (and IE do not show connecting more)
then both work fast
0
 
ahosangCommented:
in that situation, you must say:
onmouseover="changeImages('welcome_scroll', img8.src, 'choose_lang', img9.src); return true;"
onmouseout="changeImages
('welcome_scroll', img1.src, 'choose_lang', img3.src); return true;">
and so on. You need to set the src to the src of the declared Image() objects, not to a String argument.

Also for cross-browser javascript, change this:
for (var i=0; i<changeImages.arguments.length; i+=2)
{
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}

to:
for (var i=0; i<arguments.length; i+=2)
{
document.images[arguments[i]].src = arguments[i+1];
}
0
 
RiccardofcAuthor Commented:
Hi ahosang,

I have edited my source the way you asked me to do but it did not work.
If i go over the images the rollover images don't come up anymore...

you can see what happend here http://www.riccy.com/ahosang.old

Maybe I did something wrong?


Thanks
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
kollegovCommented:
Here is your page fixed


<html>
<base href="http://www.riccy.com/">
        <head>
         <title>riccy.com - Riccardo Carchedi's Home - The source of Informations</title>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
         <meta http-equiv="pics-label" content='(pics-1.1 "http://www.icra.org/ratingsv02.html" comment "ICRAonline EN v2.0" l gen true for "http://www.riccy.com" r (nz 1 vz 1 lz 1 oz 1 cz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.riccy.com" r (n 0 s 0 v 0 l 0))'>
         <meta name="keywords" content="Riccardo, Carchedi, Franco, Riccy, Ricc, Ricardo, Richi, Ricci, Rici, Richie, Richy, Pictures, Picture, San Diego, California, Neovi, Information, English, German, Deutsch, Italian, Italiano, Germany, Deutschland, Italy, Italia, Mustang, Ford, 1965, 1966, 1974, Stallion, Forum">
         <meta name="description" content="Riccardo Carchedi's Homepage with Informations about me and almost everything else in three different languages (English, Deutsch, Italiano).">
         <meta name="abstract" content="Riccardo Carchedi's Homepage with Informations about me and almost everything else">
         <meta name="author" content="Riccardo Carchedi (webmaster@riccy.com)">
         <meta name="Copyright" content="Riccardo Carchedi All Rights Reserved">
         <meta name="resource-type" content="document">
         <meta name="revisit-after" content="30 days">
         <meta name="distribution" content="Global">
         <meta name="language" content="en-us">
         <meta name="rating" content="general">
         <meta name="robots" content="follow,index">
         <script language="JavaScript" type="text/javascript">
         <!--
         if (document.images) {
          img1 = new Image();
          img2 = new Image();
          img3 = new Image();
          img4 = new Image();
          img5 = new Image();
          img6 = new Image();
          img7 = new Image();
          img8 = new Image();
          img9 = new Image();
          img10 = new Image();
          img11 = new Image();
          img12 = new Image();
          img13 = new Image();
          img14 = new Image();
          img1.src = "images/welcome_scroll.gif";
          img2.src = "images/leon_head.gif"
          img3.src = "images/choose_lang.gif"
          img4.src = "images/leon_bottom.gif";
          img5.src = "images/bottom_border.gif"
          img6.src = "images/welcome_scrolluk_choose_over.gif"
          img7.src = "images/uk_choose.gif";
          img8.src = "images/welcome_scrollde_choose_over.gif"
          img9.src = "images/choose_langde_choose_over.gif"
          img10.src = "images/de_choose.gif";
          img11.src = "images/welcome_scrollit_choose_over.gif"
          img12.src = "images/choose_langit_choose_over.gif"
          img13.src = "images/it_choose.gif";
          img14.src = "images/bottom_border.gif"
         }
         function changeImages()
         {
          if (document.images) //Test Browser if supports image Array
          {
           for (var i=0; i<arguments.length; i+=2)
           {
            document.images[arguments[i]].src = arguments[i+1].src;
           }
          }
         }
         
         
         // -->
         </script>
         <style type="text/css">
         <!--
         .tableborder {
         border: 1px solid #003366;
         }
         -->
         </style>
        </head>
        <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
         <table width="100%" align="center" height="100%" bgcolor="#B9CADD">
          <tr>
           <td align="center">
             
            <!-- Beginn nested Table -->
         
            <table width="550" class="tableborder" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
             <tr>
              <td width="550" height="99" colspan="8"><img src="images/spacer.gif" width="550" height="99" alt=""></td>
             </tr>
             <tr>
              <td width="266" height="26" colspan="7"><img src="images/spacer.gif" width="266" height="26" alt=""></td>
              <td width="284" height="26"><img src="images/leon_head.gif" width="284" height="26" alt=""></td>
             </tr>
             <tr>
              <td width="550" height="70" colspan="8"><img name="welcome_scroll" src="images/welcome_scroll.gif" width="550" height="70" alt=""></td>
             </tr>
             <tr>
              <td width="266" height="64" colspan="7"><img name="choose_lang" src="images/choose_lang.gif" width="266" height="64" alt=""></td>
              <td width="284" height="84" rowspan="2"><img src="images/leon_bottom.gif" width="284" height="84" alt=""></td>
             </tr>
             <tr>
              <td width="113" height="20"><img src="images/spacer.gif" width="113" height="20" alt=""></td>
              <td width="30" height="20">
              <a href="#"
              onmouseover="changeImages('welcome_scroll', img6); return true;"
              onmouseout="changeImages('welcome_scroll', img1); return true;">
              <img src="images/uk_choose.gif" width="30" height="20" border="0" alt=""></a></td>
              <td width="13" height="20"><img src="images/spacer.gif" width="13" height="20" alt=""></td>
              <td width="30" height="20">
              <a href="#"
              onmouseover="changeImages('welcome_scroll', img8, 'choose_lang', img9); return true;"
              onmouseout="changeImages('welcome_scroll', img1, 'choose_lang', img3); return true;">
              <img src="images/de_choose.gif" width="30" height="20" border="0" alt=""></a></td>
              <td width="12" height="20"><img src="images/spacer.gif" width="12" height="20" alt=""></td>
              <td width="30" height="20">
              <a href="#"
              onmouseover="changeImages('welcome_scroll', img11, 'choose_lang', img12); return true;"
              onmouseout="changeImages('welcome_scroll', img1, 'choose_lang', img3); return true;">
              <img src="images/it_choose.gif" width="30" height="20" border="0" alt=""></a></td>
              <td width="38" height="20"><img src="images/spacer.gif" width="38" height="20" alt=""></td>
             </tr>
             <tr>
              <td width="550" height="99" colspan="8"><img src="images/spacer.gif" width="550" height="99" alt=""></td>
             </tr>
             <tr>
              <td width="550" height="22" colspan="8"><img src="images/bottom_border.gif" width="550" height="22" alt=""></td>
             </tr>
            </table>
           
            <!-- End of nested Table -->
           
           </td>
          </tr>
         </table>
        </body>
</html>



------------------------
Note some long lines may be wrapped
0
 
RiccardofcAuthor Commented:
Hi kollegov,

I have done the changes. Everything works fine but....

the rollover Images are still super slow.
it looks like they are still being loaded over and over again.

You can see the changes here:

http://www.riccy.com/kollegov.htm

Compare the speed with this one

http://www.riccy.com/old.old


seems to me that they are the same.


Thanks
0
 
kollegovCommented:
Just tested with NN4.76 and MIE5.5  http://www.riccy.com/kollegov.htm
Both work fast when you rollover AFTER images are preloaded
(takes ~ 30-40 sec from my side)
When image not loaded yet, then it's slow
No extra connections  for loading image


0
 
RiccardofcAuthor Commented:
Thanks kollegov,

I'm using IE6 and offline the site is working fast.

As soon as I go only with IE6 on http://www.riccy.com/kollegov.htm

the mouseover effect is low again. I also noticed that if you go over the flags you can see that the little IE logo world on the top right corner of IE is spining.

Looks like he wants to connect to something....
but he should not because all the images are in the cache.

Did you bring up the two pages and compared them?

I don't know what to do else.

Thank you so much
0
 
kollegovCommented:
When you do this img1.src = "images/welcome_scroll.gif";
This doesn't mean image already loaded :)
It just start loading on the moment of execution...
Actual loading of image goes asynchronously...
So when you  rollover  this images may not be completely  loaded  yet.
and in such case it cause extra connection when you do rollover with non-finished yet image






0
 
RiccardofcAuthor Commented:
kollegov,

thank you very much for the information you provided.

I downloaded Netscape 7 and "tata" it works fine.

i guess there is a little bug in the memory handling of IE6.

Take care

0
 
RiccardofcAuthor Commented:
Hi Kollegov,

I found the bug. It was my mistake. My settings in IE6 of Temporary Internet files (Check for newer Version of stored pages) was set to Every visit to the page.
So the reason why it takes so long for me with these settings are because if I have linked the rollover images to tha same page. So IE6 looks for an update evry time I go over the flags.

Thanks again...
0
 
kollegovCommented:
To avoid this acynchronous loading problems you need first preload all images then go to actual page
where images will be taken from cache

Here is PRE loading page

  <html>
  <head>
  <base href="http://www.riccy.com/">
          <script language="JavaScript" type="text/javascript">
          <!--
          var count = 0;
          if (document.images) {


           function preloaded() {
             count--;
           }

           function preload(imn) {
              count++;
              var im = new Image();
              im.onload = preloaded
              im.src = imn;
              return im;
           }

           preload("images/welcome_scrolluk_choose_over.gif");
           preload("images/leon_head.gif");
           preload("images/choose_lang.gif")
           preload("images/leon_bottom.gif");
           preload("images/bottom_border.gif");
           preload("images/welcome_scrolluk_choose_over.gif");
           preload("images/uk_choose.gif");
           preload("images/welcome_scrollde_choose_over.gif");
           preload("images/choose_langde_choose_over.gif");
           preload("images/de_choose.gif");
           preload("images/welcome_scrollit_choose_over.gif");
           preload("images/choose_langit_choose_over.gif")
           preload("images/it_choose.gif");
           preload("images/bottom_border.gif");
          }


          function checkFinished() {
            if(count==0) location.replace("http://www.riccy.com/kollegov.htm")
            else setTimeout("checkFinished()",100);
          }
  </script>
  </head>
  <body onLoad="checkFinished()">
   Wait preloading
  </body>
  </html>
---------------------------
When all are loaded then this page will redirect to http://www.riccy.com/kollegov.htm
(left this second page as it is now)


0
All Courses

From novice to tech pro — start learning today.