这篇文章主要介绍了JS异步加载进度条 的相关资料,需要的朋友可以参考下
展现效果:
1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现.
实现思路:
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" 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异步加载进度条的相关内容，希望对大家有所帮助！
- 2019年中国社会科学院图书馆编制外聘用人员招聘启事
- 中国社会科学院外国文学研究所2020年上半年度招聘公告
- 中国社会科学院世界经济与政治研究所2020年春季招聘公告
- 2019年民政部直属事业单位乡镇论坛杂志社编辑记者招聘启事
- 中国社会科学院文学研究所2020年上半年(春季)人才招聘公告
- 中国社会科学院日本研究所2020年度招聘公告
- 中国社会科学院新闻与传播研究所2020年招聘应届博士毕业生启事
- 中国社会科学院历史理论研究所2020年第一批招聘公告
- 2019年中国社会科学评价研究院外聘工作人员招聘启事
- 中国社会科学院西亚非洲研究所2020年招聘公告
- 2019年商洛市市直机关事业单位遴选（选聘）工作人员公告
- 中国社会科学院西亚非洲研究所2019年编制外人员招聘公告
- 中国社会科学院社会学研究所2020年科研岗招聘启事
- 当代中国研究所2020年度（春季）人才引进招聘公告
- 2019年中国社会科学杂志社招聘公告
- 中国社会科学院哲学研究所2020年度招聘公告
- 中国社会科学院经济研究所2020年招聘公告
- 中国社会科学院政治学研究所2020年招聘公告
- 2019年西安市企事业单位招聘博士研究生公告
- 调整2019年度赤峰市事业单位招聘工作人员招聘计划公告
- 2019年增加赤峰市翁牛特旗融媒体中心招聘主持与播音岗位招考职位条件公告
- 广西电力职业技术学院2019年编制外（四）招聘公告
- 广西建设职业技术学院2019年度第二批招聘非实名人员资格审查结果公告
- 2019年广西职业技术学院招聘专职思想政治理论课教师通过资格审查人员、进入面试的考生及面试公告
- 梧州学院2019年高层次人才招聘公告
- non-judgmental
- non-judgmental
- nonjudicial
- nonjury
- non-justiciable
- non-justiciable
- non-kosher
- non-kosher
- non-labor
- non-labor
- 变危为安
- 变古乱常
- 变古易俗
- 变古易常
- 变名易姓
- 变容改俗
- 变幻不测
- 变幻无常
- 变幻无穷
- 变幻莫测
- 骆驼祥子著作读后感怎么写
- 会飞的教室读后感范文10篇
- 爱丽丝漫游奇境读后感范文10篇
- 弟子规读后感范文10篇
- 关于齐天大圣读后感范文
- 优秀骆驼祥子读后感范文
- 优秀六年级读后感范文
- 读平凡的世界个人有感800字
- 2023《稻草人》初中生读后感
- 读《平凡的世界》中学生有感500字11篇