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="/Public/Home/images/loader.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\';
}

//页面初始化，开启遮罩
createMask();
showMask();

//页面初始化完成，关闭遮罩
document.onreadystatechange = function(){
    if(document.readyState == "complete"){
        closeMask();
    }
}

 

hml中的 ajax

$.ajax({       
   beforeSend: function () {
       showMask();
   },
   success : function(res){
                    
   },
   complete:function () {
       closeMask();
   }
});

 

版权声明：本文为zjj1990原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zjj1990/p/8961151.html