Why won't Internet Explorer (or Chrome) display my 'Loading…' gif but Firefox will?

Question

I have a page that fires several xmlHttp requests (synchronous, plain-vanilla javascript, I'd love to be using jquery thanks for mentioning that).

I'm hiding/showing a div with a loading image based on starting/stopping the related javascript functions (at times I have a series of 3 xmlhttp request spawning functions nested).

div = document.getElementById("loadingdiv");
if(div) {
    if(stillLoading) {
        div.style.visibility='visible';
        div.style.display='';

    } else {
        div.style.visibility='hidden';
        div.style.display='none';
    }
}

In Firefox this seems to work fine. The div displays and shows the gif for the required processing. In IE/Chrome however I get no such feedback. I am only able to prove that the div/image will even display by putting alert() methods in place with I call the above code, this stops the process and seems to give the browsers in question the window they need to render the dom change.

I want IE/Chrome to work like it works in Firefox. What gives?

Answer 1

如果xmlhttprequests不是异步的，则您会发现IE至少不会重写UI，直到它们完成为止（尽管未在Chome中进行测试），但我遇到了与非异步$ .ajax jquery请求相同的问题。

Answer 2

I realize you're not asking about jQuery but you might consider using jQuery to show/hide your div for easier cross browser compatibility.

http://api.jquery.com/show/

http://api.jquery.com/hide/

Here's a helpful tutorial:

http://www.learningjquery.com/2006/09/slicker-show-and-hide