AJAX 加载效果(遮盖层)

//创建遮罩层函数体
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="../../Images/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).show();
}
//关闭遮罩层函数体
function closeMask(){
    var backdrop=document.getElementById('backdrop');
        $(backdrop).hide();
}
//页面初始化完成，关闭遮罩
document.onreadystatechange = function(){
    if(document.readyState == "complete"){
        closeMask();
    }
}

 

$(function () {

createMask();//创建遮罩层

   showMask();//展示遮罩层

})

AJAX调用部分

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