Javascript is really, really slow

[GeekWithAGuitar]

Hi folks, I'm new here but I can hopefully ask for help the right way.

I've written a script to load and unload divs with a "fade" transition effect. I've seen this done before, successfully; but, despite having only around 200 lines of code (much of it for an unrelated highlighting effect) and no chance for an open loop, that tests out in Firefox with 1 unimportant error and in IE with no errors, my page is loading and running veeeeeeeery slowly.

WTF? It's not the images, I don't think; they're mostly under 6 kb. It has to be the script, but I don't know how.

The site links are:

http://www.bitsltd.net/test/index.html

http://www.bitsltd.net/test/css/main.css

http://www.bitsltd.net/test/css/menu.css

http://www.bitsltd.net/test/javascript/main.js

P.S. before you mention anything about comments, this is the "uncompressed" version of the script. The page runs on a compressed version.

//////////////////////////////////////////////////
// Controls
//////////////////////////////////////////////////

//these scripts, to avoid error messages, requre a #default element in both the page and the css
//which is coincidentally a good place for a Javascript Needs To Be On message

//Define global variables
var timerID = null;
var timerOn = false;
var timecount = 1000;
var rolltimer = 300;
var what = null;
var newbrowser = true;
var check = false;
var lastchanged="default";
var staydead="default";
var original = true;
var layerName = null;

function init() {
//browser sniffing
if(document.getElementById) {
layerRef="document.getElementByID";
styleSwitch=".style";
visibleVar="visible";
what="dom1";
}
else if (document.layers) {
layerRef="document.layers";
styleSwitch="";
what ="ns4";
}
else if(document.all) {
layerRef="document.all";
styleSwitch=".style";
visibleVar="visible";
screenSize = document.body.clientWidth + 18;
what ="ie4";
}
else {
what="none";
newbrowser = false;
}
check = true;

//run menu transparent background scripts
showAtStart('leftmenuback');
showAtStart('rightmenuback');
//first visible panel
showLayer('newsbox');
}

function showAtStart(idName) {
changeOpac(0, idName);
visibilityOn(idName);
opacity(idName, 0, 50, timecount);
}


// Toggles the layer visibility on and the last one off, theoretically
function showLayer(layerName) {
if (layerName == lastchanged) {
return;
} else {
opacity(lastchanged, 80, 0, timecount);
}
visibilityOff(staydead); //for fast user mousing that gets past the timer
staydead=lastchanged; //trickle down layername->lastchanged->staydead
lastchanged=layerName;
changeOpac(0, layerName);
killLast=setTimeout("visibilityOff(staydead)", timecount);
visibilityOn(layerName);
opacity(layerName, 0, 80, timecount);
}


//this function cures a epileptic-seizure-inducing color flash for onmouseovers
function startTime(layerName) {
thisLayer=layerName
if (timerOn == false) {
timerID=setTimeout( "showLayer(thisLayer)" , rolltimer);
timerOn = true;
}
}

function stopTime() {
if (timerOn) {
clearTimeout(timerID);
timerID = null;
timerOn = false;

}
}


/////////////////////////////////////////////////////////////////////////////////
// Transition effects
////////////////////////////////////////////////////////////////////////////////

function visibilityOn(layerName) {
if(check) {
if (what =="none") {
return;
}
else if (what == "dom1") {
document.getElementById(layerName).style.visibility="visible";
}
else {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
}
else {
return;
}
}

function visibilityOff(layerName) {
if(check) {
if (what =="none") {
return;
}
else if (what == "dom1") {
document.getElementById(layerName).style.visibility="hidden";
}
else {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}
}
else {
return;
}
}


function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

//this won't work in Moz for anything but an anchor, but a css rule ".class:hover" will.
function overBackground(id) {
if (original) {
if (document.getElementById) {document.getElementById(id).style.backgroundColor = '9AA4CF';}
else if (document.layers) {document[id].bgColor = '9AA4CF';}
else if (document.all) {document.all[id].style.backgroundColor = '9AA4CF';}
}
else {
if (document.getElementById) {document.getElementById(id).style.backgroundColor = '';}
else if (document.layers) {document[id].bgColor = '';}
else if (document.all) {document.all[id].style.backgroundColor = '';}
}
original = !original;
}

///////////////////////////////////////////////////////
// OnLoad
///////////////////////////////////////////////////////
function onLoad() {
init();
}

function reDo() {
window.location.reload();
}

//window.onresize = reDo;

 

[theniteowl]

It does not seem to run slowly for me when I go to the link with IE6.

I have not really looked over your code but are you doing any hover effects with images defined in your CSS? IE has known issues where it insists on reloading the images from the server each time it does a hover effect instead of pulling it from memory or cache. This usually causes a flickering effect on the images for the hover.

I assume when you say load and unload divs you are really just altering their display properties, not actually retrieving them from the server each time right?

As I said, it seems to run fine for me here.


Google, you're my hero!