Js,jqueryajax implementation of page load waiting effect __JS

JS Implementation page load wait effect

Get browser page visibility height and width var _pageheight = document.documentElement.clientHeight, _pagewidth =
Document.documentElement.clientWidth; Calculate the distance between the top and left of the Loading box (loading box is 215px, height is 61px) var _loadingtop = _pageheight > 61? (_pageheight-61)/2:0, _loadingleft = _pagewidth > 215?
(_pagewidth-215)/2:0; Loading HTML custom content displayed before the page is loaded var _loadinghtml = ' <div id= ' loadingdiv ' style= ' position:absolute;left:0;width : 100%;height: ' + _pageheight + ' px;top:0;background: #f3f8ff; Opacity:0.8;filter:alpha (opacity=80); z-index:10000; " ><div style= "Position:absolute; cursor1:wait; Left: ' + _loadingleft + ' px; Top: ' + _loadingtop + ' px; Width:auto; height:57px; line-height:57px; padding-left:50px; padding-right:5px; Background: #fff URL (/content/loading.gif) no-repeat scroll 5px 10px; border:2px solid #95B8E7; Color: #696969; Font-family:\ ' Microsoft yahei\ ';
> page loading, please wait for ...</div></div> ';
Present loading effect document.write (_loadinghtml);
Window.onload = function () {var loadingmask = document.getElementById (' Loadingdiv ');
LoadingMask.parentNode.removeChild (Loadingmask);
//};
Monitor load state Change document.onreadystatechange = completeloading; Remove loading effect function completeloading () {if (document.readystate = = "complete") {var loadingmask = doc When loading state is complete
 Ument.getelementbyid (' Loadingdiv ');
  LoadingMask.parentNode.removeChild (Loadingmask); }} Slices

Jqueryajax Implementation page load wait effect

function uploading () {var _pageheight = $ (window). height (); var _pagewidth = $ (window). width (); var _loadingtop = _pagehe ight > 61?
(_pageheight-61)/2:0; var _loadingleft = _pagewidth > 215?
(_pagewidth-215)/2:0; var _loadinghtml = ' <div id= ' loadingdiv ' style= ' position:absolute;left:0;width:100%;height: ' + _PageHeight + ' Px;top : 0;background: #f3f8ff; Opacity:0.8;filter:alpha (opacity=80); z-index:10000; " ><div style= "Position:absolute; cursor1:wait; Left: ' + _loadingleft + ' px; Top: ' + _loadingtop + ' px; Width:auto; height:57px; line-height:57px; padding-left:50px; padding-right:5px; Background: #fff URL (/content/loading.gif) no-repeat scroll 5px 10px; border:2px solid #95B8E7; Color: #696969; Font-family:\ ' Microsoft yahei\ ';    
> in the implementation, please wait for ...</div></div> ';   
document.write (_loadinghtml); Loading effect function completeuploading () {$ (' #loadingDiv ') is removed when the load state is complete. Patent (). empty ();} $.ajax ({type: "pos T ", ContentType:" ApplicatIon/json ", url:"/home/getlist ", beforesend:function () {uploading ();
    }, Success:function (data) {if (data = = "Success") {//...}
    }, Complete:function () {completeuploading ();
    }, Error:function (data) {Console.info ("error:" + data.responsetext); }
});