解决js动态改变dom元素属性后页面及时渲染问题www.js8331.com

消灭js动态退换dom成分属性后页面及时渲染难题

FangSmile

减轻js动态改换dom成分属性后页面及时渲染难题

 

解决js动态改变dom元素属性后页面及时渲染问题www.js8331.com。明日实现四个进度条加载进度,dom架构其实正是七个div

 

1 <div class=”pbar”>

2 <div class=”ui-widget-header” id=”percent_bar” style=”width:
23%;”></div>

3 </div>

调整里层div的宽width属性,就会促成进程条往前走的功力。

 

本人的进程条是展现下载文件的快慢,轻巧实现黄金时代共97个文本的话,下载叁个就1%,下载了十八个就走到六成。于是代码达成如下:

 

1 var fileCount=fileList.length();

2 fileList.foreach(function(i,obj){

3     ……..//下载文件

4   document.getElementById(“percent_bar”).style.width=i/fileCount*100

  • “%”;//退换内层div的宽窄

5 })

不过你会看出文件三个个下载下来,但速度始终不曾动一动。那是因为js逻辑会优先实行,而页面渲染会在js施行完成后才举办的,那样就不能够看见二个例行的进度条了。

 

怎么可以让js逻辑推行等一等页面渲染呢?

 

 

1 var i=0;
2 var fileCount=fileList.length();
3 var loop = function () {
  if(i>fileCount)//退出循环
  return;
4     .....//下载文件
5     i++;
6    document.getElementById("percent_bar").style.width=i/fileCount*100+"%";
   //下一步循环
    that.loopId = window.setTimeout(loop, 0);
7 }
8 that.loopId = window.setTimeout(loop, 0);

 

 

透过settimeout函数能够兑现进度条动态效果了。

FangSmile 消释js动态更换dom成分属性后页面及时渲染难点前些天兑现三个进程条加载进程,do…

发表评论

电子邮件地址不会被公开。 必填项已用*标注