Browser not updating text before inserting Ajax response with innerHTML
<p>I'm working on a CMS which has a tree like page structure, so I am trying to emulate the Windows Explorer one uses to browser their C drive for example. So initially I list the pages at the root level, and using an onClick event and AJAX, clicking on a root page will display pages below that, in a DIV I've created/allocated for that.</p>

<p>All works fine, and I have an animated loading gif displayed in another DIV while xmlhttp.send is running, which is switched off when <code>if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)</code> is true.</p>

<p>The problem is that when there are a large number of sub pages (1,000 or so and yes, the client created them), the AJAX completes and the it gets to <code>document.getElementById(DivId).innerHTML = xmlhttp.responseText;</code> which causes the gif to stop spinning. So I've googled that and it seems this is a browser issue.</p>

<p>So I thought, I'll use the gif during the AJAX call and display a wait text while the browser is rendering the new innerHTML. However, despite it taking several seconds, this text never gets displayed, I just see the frozen gif and then once rendered, the "done" text.</p>

<p>If I comment out the "done" line, the wait text does get displayed though.</p>

<p>The code is below:</p>

<pre><code>function getPages(page_id, DivId)
{
    var loadingicon_div = "page_" + page_id + "_loadingicon";
    var loading_icon = 'image here, not allowed to post images..'; 

    document.getElementById(loadingicon_div).innerHTML = loading_icon;

    xmlhttp = new GetXmlHttpObject();
    xmlhttp.onreadystatechange = function() 
                    { 
                        if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200)
                        {
                            document.getElementById(loadingicon_div).innerHTML = "Retrieved pages from the server, please wait while your browser displays them ...";
                            document.getElementById(DivId).innerHTML = xmlhttp.responseText;
                            document.getElementById(DivId).style.padding="5px";
                            document.getElementById(loadingicon_div).innerHTML = "done";
                        }
                    }

    var url="tree_ajax.php";

    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
}
</code></pre>
