我试图在加载某些内容时添加一条加载消息,但直到这些内容加载后它才会出现。这是我的代码:
$('#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/
最佳答案
如果是静态消息,则无需即时创建。只需将其放入并使用 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>');
});
关于javascript - 用 jQuery 插入的元素不会立即出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5751531/