浅析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中的$(document).ready()与window.onload的区别
Nov 18 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 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
PHP 开发工具
2006/12/06 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
python3爬取torrent种子链接实例
2020/01/16 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
企划经理的岗位职责
2013/11/17 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
教师演讲稿范文
2014/01/08 职场文书
专项法律服务方案
2014/06/11 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang