本文介绍如何在JavaScript中实现异步加载时的进度条效果。通过动态创建DOM元素，利用CSS设置遮罩层与旋转动画，并在Ajax请求前后控制其显示与隐藏。文中提供了完整的HTML、JS及CSS代码示例，并探讨了在Angular等框架中封装HTTP请求以自动调用进度条的方法。
效果展示与实现思路
效果展示
点击Load按钮后，模拟异步加载过程。此时浏览器界面被遮挡，进度条随即出现。
实现思路
当用户点击Load按钮触发异步请求时，调用相关方法以显示加载条。
具体如何构建进度条？
首先，在document.body中新增一个div作为遮罩层，覆盖整个浏览器窗口。设置其背景为灰色，z-index设为999，从而在加载期间禁止用户操作界面元素。
其次，在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);
}
}封装与框架集成建议
总结
可以将显示进度条的方法封装起来，对Ajax请求进行二次封装，使得每次调用Ajax请求时自动触发进度条显示。
若使用Angular框架，可利用其提供的HTTP拦截器或监控方法，在监听HTTP请求执行时自动调用进度条逻辑。这样无需在每次HTTP调用时手动调用显示进度条的方法，简化了开发流程。
以上介绍了JS异步加载进度条的相关内容，希望对大家有所帮助！