Element inserted with jQuery doesn't appear right away

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:

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

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.)

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 before the delay?

EDIT: updated code an put version on jsFiddle: http://jsfiddle.net/an2Pc/3/

---

If it is a static message, you don't need to create on the fly. Simply put it in and hide it using display: none; in css. Then, you can show it using $('#loading').show() or even $('#loading').fadeIn(). I don't know what do you do in the loop, but there should not be a reason for not showing inmediately.

Edited: I could verify you are right, it doesn't show, not sure why. Anyway, you can fix it by inserting the code as a callback of the show() method, it works:

$('#loading').text('Loading...').show(function() {
    for ( var i in ['list','of','things'] )
    {
        for ( var j=0; j<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('<ul><li>Test</li><li>Test</li></ul>'); 
});

Edited for new case: for adding a callback to a method that doesn't include one, you can use the trick of animate some property that doesn't change anything, like this (I don't know if it's a best practice, but it works :)

<div class="notice" id="loading">Testing</div>

<div class="content" id="content1">a</div>

$('#loading').text('Loading...').animate({ opacity: 1 }, function() {
    for ( var i in ['list','of','things'] )
    {
        for ( var j=0; j<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('<ul><li>Test</li><li>Test</li></ul>');
});

---

Hi~ Please use it in your page:

<div class="notice" id="loading" style="display:none">Loading...</div>
<input type="button" onclick="Load()" />

following code in head block:

<script type="text/javascript">
    function Load() {
        $("#loading").css("display", "block").fadeIn('slow');
        for ( i=0; i<1000;i++) {
            // load some stuff here
        }
        $("#loading").fadeOut('slow');

    }
</script> 

Don't forget to include the JQUERY file:

 <script type="text/javascript" src="../Scripts/jquery-1.5.1.min.js"></script>

---

I'm not sure why this happens, but a solution is to the put the loop inside a setTimeout to delay it a bit.

$('#loading').text('Loading...').show();
setTimeout(function() {
    for (var i in ['list', 'of', 'things']) {
        for (var j = 0; j < 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('<ul><li>Test</li><li>Test</li></ul>');
}, 1);

jsFiddle: http://jsfiddle.net/an2Pc/4/