CSS部分
CSS一部分
div.loadingdiv {
height: 100%;
width: 100%;
/*100%遮盖网页页面, 防止user在loading时开展别的实际操作*/
position: fixed;
z-index: 99999;
/*须超过网页页面*/
top: 0;
left: 0;
display: block;
background: #000;
opacity: 0.6;
text-align: center;
}
div.loadingdiv img {
position: relative;
vertical-align: middle;
text-align: center;
margin: 0 auto;
margin-top: 50vh;
}
HTML中添加此段 img 为随意一个gif档
div 的display = none 一开始设为掩藏
AJAX一部分
$.ajax({
beforeSend: function () {
//将div显示信息
$('#loading').css("display", "");
},
type: 'GET',
async: false,
url: 自身的url,
success: function (data) {
//do something
},
complete: function () {
//再度掩藏
$('#loading').css("display", "none");
//检测可运用setTimeout 让loading实际效果显著
//setTimeout(function () { $('#loading').css("display", "none"); }, 3000);
}
})