javascript - 用 jQuery 插入的元素不会立即出现

Question

我试图在加载某些内容时添加一条加载消息，但直到这些内容加载后它才会出现。这是我的代码:

$('#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;
    }
}
$('#loading').hide();
$('#content1').html('<ul><li>Test</li><li>Test</li></ul>');

运行此程序时，页面在 for 循环运行时显示为空白，并且不显示加载横幅。加载完成后，它只会出现并立即开始淡出。 (我在上面的循环中添加了一个大的 for 循环来模拟较慢的加载，并且在循环完成之前它仍然不会显示加载消息。)

加载时间不到一秒(无论如何在 Chrome 上)所以这不是一个大问题，但为什么会发生这种情况，我能否让消息在延迟之前出现？ p>

编辑:更新代码并在 jsFiddle 上放置版本:http://jsfiddle.net/an2Pc/3/

Answer 1

如果是静态消息，则无需即时创建。只需将其放入并使用 display: none; 隐藏即可。在 CSS 中。然后，您可以使用 $('#loading').show() 显示它甚至 $('#loading').fadeIn() .我不知道你在循环中做了什么，但应该没有理由不立即显示。

已编辑:我可以验证你是对的，它没有显示，不知道为什么。无论如何，您可以通过插入代码作为 show() 方法的回调来修复它，它有效:

$('#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>'); 
});

针对新案例进行了编辑:为了向不包含回调的方法添加回调，您可以使用动画化一些不改变任何属性的技巧，就像这样(我不知道这是否是最好的练习，但它有效:)

<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>');
});