快速解决js动态改变dom元素属性后页面及时渲染的问题


Posted in Javascript onJuly 06, 2016

今天实现一个进度条加载过程,dom结构其实就是两个div

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

控制里层div的宽width属性,就能实现进度条往前走的效果。

我的进度条是显示下载文件的进度,简单实现一共100个文件的话,下载一个就1%,下载了20个就走到20%。于是代码实现如下:

var fileCount=fileList.length();
 fileList.foreach(function(i,obj){
   ........//下载文件
  document.getElementById("percent_bar").style.width=i/fileCount*100 + "%";//改变内层div的宽度
 })

但是你会看到文件一个个下载下来,但进度始终没有动一动。这是因为js逻辑会优先执行,而页面渲染会在js执行结束后才进行的,这样就无法看到一个正常的进度条了。

怎么能让js逻辑执行等一等页面渲染呢?

var i=0;
var fileCount=fileList.length();
var loop = function () {
 if(i>fileCount)//退出循环
return;
  .....//下载文件
  i++;
  document.getElementById("percent_bar").style.width=i/fileCount*100+"%";

 //下一步循环  that.loopId = window.setTimeout(loop, 0);7 }
that.loopId = window.setTimeout(loop, 0);

通过settimeout函数可以实现进度条动态效果了。

以上这篇快速解决js动态改变dom元素属性后页面及时渲染的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
jQuery 3.0十大新特性
Jul 06 #Javascript
Javascript 基础---Ajax入门必看
Jul 06 #Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 #Javascript
jQuery事件委托之Safari
Jul 05 #Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 #Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 #Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 #Javascript
You might like
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP队列用法实例
2014/11/05 PHP
php购物车实现方法
2015/01/03 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python继承和抽象类的实现方法
2015/01/14 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python在文本开头插入一行的实例
2018/05/02 Python
Django中间件实现拦截器的方法
2018/06/01 Python
浅述python2与python3的简单区别
2018/09/19 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
深入解析神经网络从原理到实现
2019/07/26 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
Python调用Redis的示例代码
2020/11/24 Python
失业者真诚求职信范文
2013/12/25 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
公证书格式
2015/01/23 职场文书
2015年测量员工作总结
2015/05/23 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫