版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_28254093/article/details/81628724
效果图
1.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width =device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="victor" name="author"/>
<style>
#loadDiv {
display: none;
width: 100%;
height: 100%;
position: fixed;
z-index: 9999;
background-color: rgba(235, 235, 235, 0.95);
top: 0px;
}
#gif {
margin: auto;
margin-top: 30%;
border: 1px solid #f5f5f5;
background-color: white;
width: 86px;
border-radius: 10px;
}
#gifText{
padding-top: 20px;width:100%;color: #5c5c63;text-align: center;
}
</style>
</head>
<body>
<div>
<div id="loadDiv">
<div id="gif">
<img style="padding: 10px" src="../images/wait.gif" _height="64" _width="64">
</div>
<div id="gifText" >
<div id="loadText">正在验证数据，请稍后！</div>
</div>
</div>
</div>
</body>
</html>
2.js
function LoadDivs(flg) {
var s = null;
document.getElementById("loadDiv").style.display = flg == true ? "block" : "none";
if (flg) {
var index = 0;
var text = ["正在验证数据，请稍后！", "正在连接消息服务器，请稍后！", "正在加载数据，请稍后！"];
s = setInterval(function () {
document.getElementById("loadText").innerText = text[index] || "正在验证数据，请稍后！";
index++;
if (index > text.length - 1) {
index = 0;
}
}, 2000);
} else {
if (s != null && s != undefined) {
clearInterval(s);
}
}
}
3.调用
LoadDivs(true);
LoadDivs(false)