Question

我想用jQuery创建一个简单的加载栏。我有n个ajax请求，我按顺序运行，我想在每个之后更新栏。问题是HTML只在完成所有这些操作后才会更新。我可以看到属性在加载时发生变化，但视觉变化只出现在最后。如何在页面加载期间显示它们？

我使用此行更新条形宽度progressDiv.attr('style', 'width: ' + perc + '%');加载时宽度会更新，但实际更改仅在最后。

Answer 1

尝试progressDiv.css('width', perc + '%');

Answer 2

问题是浏览器引擎将保持对页面的CSS更改，直到脚本完成。这是一种获得更好性能的方法。

为什么会这样？

为了更好地理解，请查看此示例，该示例更改脚本每行中的div颜色。观察行为

＆＃13;

$('div').css('background-color','red');
alert('now showing red!');
$('div').css('background-color','yellow');
alert('now showing yellow!');
$('div').css('background-color','green');
alert('now showing green!');
$('div').css('background-color','blue');
alert('now showing blue!');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:100px;height:100px;"></div>

＆＃13;

您可以注意到，在脚本完成之前，背景颜色不会更改。这是因为浏览器引擎跟踪其内存中元素发生的所有更改，一旦一切都完成，它会继续并更新UI，想象一下浏览器是否已开始为每次调用更新UI？如果有很多变化，那么你会看到性能问题。

如何解决？

查看此示例

＆＃13;

setTimeout(function(){
 $('div').css('background-color','red');
 alert('now showing red!');
},0);

setTimeout(function(){
 $('div').css('background-color','yellow');
 alert('now showing yellow!');
},0);

setTimeout(function(){
 $('div').css('background-color','green');
 alert('now showing green!');
},0);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:100px;height:100px;"></div>

＆＃13;

将您的功能包装在setTimeout中将解决问题。

这意味着将行progressDiv.attr('style', 'width: ' + perc + '%');包裹在setTimeout中必须解决您的问题。

setTimeout(function(){
 progressDiv.attr('style', 'width: ' + perc + '%');
},0)

详细了解setTimeout(function(){},0)的工作原因...... Here is more detailed explanation

希望这有帮助。

Answer 3

正确的语法是

progressDiv.css('width', perc + '%');

或

progressDiv.css({width: perc + '%'});

jQuery在页面加载之前不更新HTML

3 个答案: