Javascript loading screen while executing code (IE)

I’ve run into a roadblock I just can’t seem to get past. I’m developing a website for work (internal) and I have a lot of javascript calculations going on when someone enters data. What I want to do is to have a div apear when it begins calculating and goes away when it ends. I’m using:

// CSS code
div.loading-invisible{ display: none; }
div.loading-visible { display: block; … various formatting here … }

// Javascript

function calculate(evalForm) {
document.getElementById(“loading”).className = “loading-visible”;

… calculations …

document.getElementById(“loading”).className = “loading-invisible”;

}

// HTML code
< div id=“loading” class=“loading-invisible”>
<p><img src=“spinner.gif” /> Calculating… </p>
</div>

<div class=“question”> option < input type=“checkbox” name=“choice” onclick=“calculate(this.form);” /> </div>

Something like that. It works great in firefox. The div display appropriately, calculates, then disappears when it’s finished. However, in IE it seems to want to calculate everything before anything is displayed. I placed alerts in the code to be able to pause it mid way and it worked. But without alerts it just hangs while everything is being calculated and the code for the loading screen just seems to cancel itself out. I attempted to put some waits in the code such as:

setTimeout(“newFunctionForCalc()”,1250);

and

while (document.getElementById(“loading”).className != “loading-visible”) {}

still no dice in IE, but works flawless in firefox.

Any advice?

My understanding is that browsers make little/no guarantee when a dom change will be visually rendered. Think of it as there being 2 layers…the dom, and the browsers rendering engine(which reads the dom when it wants to repaint). Changing the dom, should update it immediately, so that future reads of dom values are correct, but they may not reflect what is currently rendered.

I would be really surprised though, if this didn’t work the vast majority of the time


document.getElementById("loading").className = "loading-visible";
setTimeout(function(){
    calculate();
    document.getElementById("loading").className = "loading-invisible";
}, 20);

a timeout of 20 just means “no sooner than about 20ms”. The browser is free to take longer than 20, so that it can address more important jobs, like rendering, or handling events.

Maybe someone can confirm my assumptions.

Dude, you are awesome. That worked! This has been bugging me since Sunday.

I have a follow-up to this. It isn’t exactly something that’s necessary to fix, but a nice little thing to polish up the project.

But when I get the loading screen in IE I have an animated GIF (just something spinning) but it isn’t animated when the div becomes visible. However, in Firefox it works correctly.

Thoughts?