今天实现一个进度条加载过程,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);
 }
that.loopId = window.setTimeout(loop, 0);

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

解决js动态改变dom元素属性后页面及时渲染问题的更多相关文章

  1. js动态改变img元素src在IE无效的问题

    做了个验证码功能,需要做个点击改变验证码图片的功能,使用js改变img的src,代码如下 $("#cerificationCodeImg").attr("src" ...

  2. 原生js动态改变dom高度

    item参数为要改变高度的dom,maxHight参数为dom的最大高度,speed参数为改变高度的速度function addHeight(item,maxHight,speed){ var ite ...

  3. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  4. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  5. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  6. JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  7. 动态创建dom元素

    效果图如上所示: 思维nav:就相当于qq空间发表动态(说说),在输入框里输入内容,点击提交(发表),内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app,大家可以随便想象下哪些情况会遇到动态创 ...

  8. 2)JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  9. JS获取HTML DOM元素的方法

    JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...

随机推荐

  1. 工欲善其事,必先利其器 之 VS2013全攻略(安装,技巧,快捷键,插件)!

    如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...

  2. js中参数不对应问题

    因为js是一种弱类型的编程语言,对数据类型的要求没有其他编程语言的要求严格,所以在定义函数的时候不需要像java和C#一样对其传入参数的类型进行定义.那么传入参数的个数有没有影响呢?今天小猪就做了个实 ...

  3. 创建 OVS Local Network - 每天5分钟玩转 OpenStack(129)

    上一节我们完成了 OVS 的准备工作,本节从最基础的 local network 开始学习.local network 不会与宿主机的任何物理网卡连接,流量只被限制在宿主机内,同时也不关联任何的 VL ...

  4. 带你实现开发者头条APP(四)---首页优化(加入design包)

    title: 带你实现开发者头条APP(四)---首页优化(加入design包) tags: design,Toolbar,TabLayout,RecyclerView grammar_cjkRuby ...

  5. Xamarin+Prism小试牛刀:定制跨平台Outlook邮箱应用

    通过本文你将学会如下内容: 1,如何使用Xamarin开发跨平台(Windows,Android,iOS)应用. 2,如何使用微软的登录界面登入Microsoft账号. 3,如何使用Outlook邮箱 ...

  6. Android SDK 与API版本对应关系

    Android SDK版本号 与 API Level 对应关系如下表: Code name Version API level   (no code name) 1.0 API level 1   ( ...

  7. 用Kotlin创建第一个Android项目(KAD 01)

    原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:h ...

  8. iOS之开发中常用的颜色及其对应的RGB值

      R G B 值   R G B 值   R G B 值 黑色 0 0 0 #000000 黄色 255 255 0 #FFFF00 浅灰蓝色 176 224 230 #B0E0E6 象牙黑 41 ...

  9. .Net 初步学习笔记之一——.Net 平台与.Net FrameWork框架的关系

    .Net 包含两部分 .Net平台 和.Net FrameWork 框架 1..Net FrameWork框架包含于.Net平台. .Net FrameWork提供环境和支撑保证.Net平台运行. 2 ...

  10. 使用Jenkins配置Git+Maven的自动化构建

    Jenkins是一个开源的持续集成工具,应用Jenkins搭建持续集成环境,可以进行自动构建.自动编译和部署,非常方便. 在服务器比较少的情况下,Jenkins的优势并不明显,但是随着项目发展,服务器 ...