快速解决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 相关文章推荐
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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采集速度探究总结(原创)
2008/04/18 PHP
JS实现php的伪分页
2008/05/25 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
简单了解什么是神经网络
2017/12/23 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
六一儿童节活动总结
2014/08/27 职场文书
财会专业大学生求职信
2014/09/26 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
护士年终个人总结
2015/02/13 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android