Topic awaiting preservation: Javascript problem in Firefox

Hi...
Can anyone help me with a strange problem?
I did a site for a friend and there was some js involved.
He noticed yesterday that in Firefox the browser had the "Transffering from..." message in the status bar even after the page has loaded. After a while it switches to a Waiting for message... which eventually goes away after a while. Also the Stop button is disabled and I know for sure that all the content is loaded.
So i started digging in the code, as he said the server logs don't give any info and the problem must be client-side.
What I noticed was that the preload function, called by the onLoad event of the body tag was causing this in some way. Removing the call to the function or leaving the function empty makes the browser display Done in the status bar as soon as the content is loaded.
The js was used mainly for a roll-over and hide/display effect. Quite classical. After doing the above I noticed that even with the preload function taken out of the loop if you hover over the buttons the same problem re-appears, the browser appears to be still looking for some content.
You can view this here (with preload on). The js is here.
You can view the version that works fine(well, untill hovering the buttons) here, with js here.
Can someone point out the bad code?
Thanks.


Curiously yours, crip

(Edited by crip on 10-12-2004 09:06)

I can't see anything obvious, but I'd be suspicious of those eval() statements - because they're interpreting javascript as they go, certain optimisations like preloading images are likely to be missed. A line such as

eval("document.images." + imag + ".src='images/but2" + imag + ".jpg'");

can be rewritten without an eval, like this:

document.images[imag].src='images/but2' + imag + '.jpg';

The error seems to me to occur when you are loading files from the server. It could be that the server sends the images without closing the connection. However, that code is junk. Let's see if we can't create something better.

First, change the images to the following:

<img

    alt="security"

    id="security"

    src="images/but1security.jpg" />

Also, change the hover layers to be named image id + '_hover' consistently, to make the scripting smoother.

Second, try to keep script and HTML separate. This is easily done by moving all scripting that does something into the onload event.

window.onload=function(){

    var

        i=0,

        img=document.getElementsByTagName('img'), // Or document.images if you wish

        e,

        t=document.getElementById('exp');

    while(e=img.item(i++)){

        (new Image).src='images/but2'+e.id+'.jpg'; // If you want to preload the rollover images

        e.onmouseover=rollover;

        e.onmouseout=rolloff;

    }

    e=setInterval(function(){t.innerHTML='experience: '+(new Date).getTime();},1e3); // Why not simplify writetime to this?

}

and finally, the variable and function definitions:

var

    layer,

    hover=false,

    delay=1e3;

    timeout;



function togglestatus(){

    layer.style.visibility=layer.style.visibility=='visible'?'hidden':'visible';

}



function rollover(){

    hover=true;

    layer=document.getElementById(this.id+'_hover');

    this.src='images/but2'+this.id+'.jpg';

    timeout=setTimeout(function(){hover&&togglestatus();}, delay); // Taking shortcuts

}



function rollout(){

    hover=false;

    togglestatus();

    this.src='images/but1'+this.id+'.jpg';

    clearTimeout(timeout);

}

This code is untested, so it might contains some problems.
--
var Liorean = {
prototype: JavaScriptGuru.prototype,
abode: "http://web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

(Edited by liorean on 10-12-2004 15:44)