浅析JS异步加载进度条


Posted in Javascript onMay 05, 2016

展现效果:

1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现.

浅析JS异步加载进度条

实现思路:

1.当用户点击load button执行异步请求. 调用方法 出现加载条

2.怎么实现进度条呢?

1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法修改界面值

2) 在document.body 新增一个动态的div.

代码实现:

Main.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="Loading.js" charset="utf-8"></script>
<link rel="stylesheet" href="Loading.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<button onclick="showLoading()">Load</button>
</body>
</html>

  Loading.js:

function showLoading()
{
var overDiv = document.createElement("div");
var loadingDiv = document.createElement("div");
var childDiv1 = document.createElement("div");
var childDiv2 = document.createElement("div");
var childDiv3 = document.createElement("div");
overDiv.classList.add('over');
loadingDiv.classList.add('spinner');
childDiv1.classList.add('bounce1')
childDiv2.classList.add('bounce2')
childDiv3.classList.add('bounce3')
loadingDiv.appendChild(childDiv1);
loadingDiv.appendChild(childDiv2);
loadingDiv.appendChild(childDiv3);
document.body.appendChild(overDiv);
document.body.appendChild(loadingDiv)
setTimeout(function()
{
document.body.removeChild(overDiv);
document.body.removeChild(loadingDiv)
}, 5000);
}

  Loading.css

.spinner {
width: 150px;
text-align: center;
left: 50%;
top: 50%;
position: absolute;
z-index: 1000;
}
.over {
width: 100%;
height: 100%;
z-index: 998;
background-color: gray;
position:absolute;
top: 0px ;
left : 0px;
opacity: 0.2;
}
.spinner > div {
width: 30px;
height: 30px;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

 总结:

1.可以将方法提出来. 对Ajax请求重新封装一次. 实现调用Ajax请求的时候自动条用进度条方法.

2.如果是Angular的话. Angular提供了方法监控http调用.监控http执行请求的时候调用进度条方法就行了.无需在每次执行 http调用.监控http执行请求的时候调用进度条方法就行了.无需在每次执行http的时候都去自己调用出现进度条的方法.

以上内容是小编给大家介绍的js异步加载进度条的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
Javascript 命名空间模式
Nov 01 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 #Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 #Javascript
一分钟理解js闭包
May 04 #Javascript
学JavaScript七大注意事项【必看】
May 04 #Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 #Javascript
开启BootStrap学习之旅
May 04 #Javascript
JavaScript入门教程之引用类型
May 04 #Javascript
You might like
桌面中心(一)创建数据库
2006/10/09 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python中title()方法的使用简介
2015/05/20 Python
python学习 流程控制语句详解
2016/06/01 Python
python 获取网页编码方式实现代码
2017/03/11 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
Python函数中的可变长参数详解
2019/09/12 Python
python实现简易淘宝购物
2019/11/22 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
小学校长汇报材料
2014/08/20 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
Elasticsearch 聚合查询和排序
2022/04/19 Python
Fluentd搭建日志收集服务
2022/09/23 Servers