JS implementation of the page loaded before loading prompt effect complete example "with demo source download" _javascript Tips

This article describes the JS implementation of the page loaded before the loading prompt effect. Share to everyone for your reference, specific as follows:

One, JS code:

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

 }
}

Second, the effect:

Description

This section of JS code into the The style of loading effect can be changed according to own style, loading.gif this picture need oneself to find (a lot of online).

Full Demo Instance code click here to download the site.

More interested readers of jquery-related content can view the site topics: "jquery Common Classic Effects Summary", "jquery common Plug-ins and Usage summary", "jquery table (table) Operation Tips Summary", "jquery form Operation Skills Summary", " jquery Operations JSON Data tips Summary, jquery extension techniques Summary, jquery drag-and-drop effects and techniques summary, jquery AJAX usage Summary, jquery animation and special effects usage summary and jquery selector Usage Summary

I hope this article will help you with the jquery program design.