快速解决js动态改变dom元素属性后页面及时渲染的问题
2016-07-06 09:46
806 查看
今天实现一个进度条加载过程,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元素属性后页面及时渲染的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Mootools 1.2教程(2) DOM选择器
- DOM 事件流详解
- jquery设置表单元素为不可用的简单代码
- Dom在ajax技术中的作用说明
- C#实现将数组内元素打乱顺序的方法
- javascript针对DOM的应用分析(三)
- Dom 是什么的详细说明
- javascript针对DOM的应用分析(五)
- jQuery删除一个元素后淡出效果展示删除过程的方法
- jQuery拖动元素并对元素进行重新排序
- javascript针对DOM的应用实例(一)
- 牛叉的Jquery――Jquery与DOM对象的互相转换及DOM的三种操作
- Perl中怎样从数组中删除某个值?
- PHP的数组中提高元素查找与元素去重的效率的技巧解析
- 实用jquery操作表单元素的简单代码
- 在javascript中对于DOM的加强
- Dom与浏览器兼容性说明
- JavaScript DOM学习第一章 W3C DOM简介
- javascript学习笔记(十八) 获得页面中的元素代码
- javascript实现在某个元素上阻止鼠标右键事件的方法和实例