快速解决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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
js获取微信版本号的方法
May 12 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
深入了解JavaScript 私有化
May 30 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 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
星际争霸任务指南——人族
2020/03/04 星际争霸
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
微信红包随机生成算法php版
2016/07/21 PHP
golang与PHP输出excel示例
2016/07/22 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
九步学会Python装饰器
2015/05/09 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python 如何设置守护进程
2020/10/29 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
纠风工作实施方案
2014/03/15 职场文书
创意婚礼策划方案
2014/05/18 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
交通事故委托书范本
2014/09/28 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
个人年底工作总结
2015/03/10 职场文书
追讨欠款律师函
2015/06/24 职场文书
资产移交协议书
2016/03/24 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers