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

if the xmlhttprequests are not asynchronous you will find IE at least wont rewrite the UI untill they are finished (not tested in Chome though), I cam across the same issue with non async $.ajax jquery requests.

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