?
Solved

Preload Images with Javascript working,  but very very very slow

Posted on 2003-03-31
11
Medium Priority
?
339 Views
Last Modified: 2012-08-13
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
0
Comment
Question by:Riccardofc
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
11 Comments
 
LVL 12

Expert Comment

by:ahosang
ID: 8242374
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
 

Author Comment

by:Riccardofc
ID: 8242504
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
 
LVL 10

Expert Comment

by:kollegov
ID: 8242708
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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

Author Comment

by:Riccardofc
ID: 8242763
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
 
LVL 10

Expert Comment

by:kollegov
ID: 8242820
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
 

Author Comment

by:Riccardofc
ID: 8242877
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
 
LVL 10

Expert Comment

by:kollegov
ID: 8242883
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
 
LVL 10

Accepted Solution

by:
kollegov earned 300 total points
ID: 8242911
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
 

Author Comment

by:Riccardofc
ID: 8242912
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
 

Author Comment

by:Riccardofc
ID: 8243008
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
 
LVL 10

Expert Comment

by:kollegov
ID: 8243040
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

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question