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上，无论如何），所以这不是一个大问题，但为什么会发生这种情况，我可以在延迟之前让消息显示吗？

编辑：在jsFiddle：http://jsfiddle.net/an2Pc/3/
上更新了代码

Answer 1

如果是静态消息，则无需动态创建。只需将其隐藏起来并使用css中的display: none;隐藏它。然后，您可以使用$('#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>');
});

Answer 2

嗨〜请在您的页面中使用它：

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

在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>

不要忘记包含JQUERY文件：

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

Answer 3

我不确定为什么会发生这种情况，但解决方法是将循环置于setTimeout内以稍微延迟。

$('#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/

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

3 个答案: