前端：Ajax请求时，展示加载中遮罩层

最新推荐文章于 2022-02-18 16:24:48 发布

Outlier9527

最新推荐文章于 2022-02-18 16:24:48 发布

阅读量1.3k

点赞数 2

分类专栏：前端知识文章标签： javascript ajax

本文链接：https://blog.youkuaiyun.com/weixin_42334518/article/details/107660902

版权

前端知识专栏收录该内容

16 篇文章

订阅专栏

在js文件中添加这几个函数。

//创建遮罩层函数体
function createMask(){
    var node=document.createElement('div');
        node.setAttribute('id','backdrop');
        node.style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background-color:rgba(0,0,0,0.6);";
        node.style.display="none";
    var html='<div style="position: fixed; top: 38%; left: 38%; z-index: 1001;">';
        html+='<div style="text-align:center;">';
        html+='<img src="../../assets/loading.gif" style="width:60px;height:60px;">';
        html+='<div style="padding-left:10px;font-size:14px;color:#FFF;">网络请求中...</div>';
        html+='</div>';
        html+='</div>';
        node.innerHTML=html;
    var body=document.querySelector('body');
        body.appendChild(node);    
}
//开启遮罩层函数体
function showMask(){
    var backdrop=document.getElementById('backdrop');
        backdrop.style.display='block';
}
//关闭遮罩层函数体
function closeMask(){
    var backdrop=document.getElementById('backdrop');
        backdrop.style.display='none';
}
//页面初始化完成，关闭遮罩
document.onreadystatechange = function(){
    if(document.readyState == "complete"){
        closeMask();
    }
}

然后在页面加载函数中添加如下代码

$(function () {
	createMask();//创建遮罩层
	showMask();//展示遮罩层
})

Ajax使用

		beforeSend: function () {
		    showMask(); //展示
		},
		success:function(result){
		},
		complete:function () {
		    closeMask();//关闭
		}