loading img

so i want a loading img to display when a javascript function is called and be hidden when the function finishes. the function takes a bit of time (anywhere from 1 sec to 10 secs usually), so i don't want the user to think nothing is happening. below is the relevant code. the first snippet sets up the loading img and a label for it. the second and third snippets are at the beginning and end of the function (respectively) and turn visibility on and off (respectively). for some reason, it can't ever see it turn on. a reasonable enough amount of time is elapsing such that i expect to see it. any ideas?



<div class="data">
<img id="loading" src="pics/loading.gif" style="visibility: hidden" />
<label id="loading_lbl" style="visibility: hidden"> &nbsp; Loading...<label>
</div>


document.getElementById("loading").style.visibility = "visible";
document.getElementById("loading_lbl").style.visibility = "visible";

document.getElementById("loading").style.visibility = "hidden";
document.getElementById("loading_lbl").style.visibility = "hidden";

The problem is that you are not calling the code in between using ajax.
When you use ajax you can run more than one process in parallel while if you do not use ajax the process are in a row.

And the rotating image is a process by itself.

So you should display the image at the beginning of your function and hide when the ajax.readyState becomes == 4.

Other than that the image will show but will not turn.