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(); } });