Element inserted with jQuery doesn't appear right away
<p>I am trying to add a loading message while some stuff is loading, but it doesn't appear until after the stuff loads. Here is my code:</p>

<pre><code>$('#loading').text('Loading...').show();
//alert('test');
for ( var i in ['list','of','things'] )
{
    // dummy loop to waste some time
    for ( var j=0; j&lt;5000000; j++ ) {
        var asd = j+123*j%17;
        var qwe = j+123*asd%17 + j;
        var zxc = j+123*asd%17 + j*zxc;
    }
}
$('#loading').hide();
$('#content1').html('&lt;ul&gt;&lt;li&gt;Test&lt;/li&gt;&lt;li&gt;Test&lt;/li&gt;&lt;/ul&gt;');
</code></pre>

<p>When running this, the page appears blank while the for loop is running and the loading banner doesn't appear. When loading is done it simply appears and instantly starts fading out. (I added a big for loop inside the above loop to simulate a slower load and it still doesn't show the loading message until the loop is done.)</p>

<p>The loading takes less than a second (on Chrome, anyway) so it's not a huge problem, but why does this happen, and can I get the message to appear <em>before</em> the delay?</p>

<p>EDIT: updated code an put version on jsFiddle: <a href="http://jsfiddle.net/an2Pc/3/" rel="nofollow">http://jsfiddle.net/an2Pc/3/</a></p>
