解决js动态改变dom元素属性后页面及时渲染问题
来源:互联网 发布:开源财务系统 php 编辑:程序博客网 时间:2024/06/02 03:02
今天实现一个进度条加载过程,dom结构其实就是两个div
1 <div class="pbar">2 <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div>3 </div>
控制里层div的宽width属性,就能实现进度条往前走的效果。
我的进度条是显示下载文件的进度,简单实现一共100个文件的话,下载一个就1%,下载了20个就走到20%。于是代码实现如下:
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函数可以实现进度条动态效果了。
0 0
- 解决js动态改变dom元素属性后页面及时渲染问题
- 使用DOM动态改变页面外观----读取和设定元素属性
- 解决DOM元素循环渲染后出现点击事件多次执行问题
- 动态添加元素后 js点击 DOM查找不到
- JavaScript动态改变页面元素
- JS DOM,常用元素属性
- js DOM 获取页面元素
- JqueryMobile Checkbox在页面上没有及时渲染的问题
- 在编写动态插入删除DOM元素时,Easyui控件渲染效果失败的问题
- 解决修改css文件或js文件后浏览器无法及时更新的问题方法
- vue-cli 更改数组中的数据,页面dom及时渲染 Vue.set方法
- jquery改变页面元素的属性
- JS操作DOM元素属性和方法
- JS操作DOM元素属性和方法
- JS操作DOM元素属性和方法
- JS操作DOM元素属性和方法
- JS操作DOM元素属性和方法
- js获取Dom元素的属性样式
- hydro下gazebo的Failed to connect to master in 30 seconds 问题
- js中对函数设置默认参数值的3种方法
- 欢迎使用CSDN-markdown编辑器
- Apereo CAS 5.0.X 启用OAuth2服务时的一个坑
- (转载)c++实现反射机制
- 解决js动态改变dom元素属性后页面及时渲染问题
- JAVA学习之this,static,String常用方法
- [编程题]序列和
- 474. Ones and Zeroes
- Android热修复之Tinker
- 购物车项目总结
- java中泛型的使用
- 简单小结一下关于JavaScript中的闭包
- adnroid.appwidget.AppWidgetProvider