This article describes the loading prompt effect before the page loaded by js is loaded. Share it for your reference, as follows:
1. JS code:
//Get the visible height and width of the browser page var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth;//Calculate the distance between the loading box from the top and left (the width of the loading box is 215px, the height is 61px) var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0, _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;//LoadingHtml custom content displayed before the page is not 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: #ffff url(/Content/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:/'Microsoft YaHei/';">The page is loading, please wait...</div></div>';//The loading effect is rendered document.write(_LoadingHtml);//window.onload = function () {// var loadingMask = document.getElementById('loadingDiv');// loadingMask.parentNode.removeChild(loadingMask);//};// listen to change the loading state document.onreadystatechange = completeLoading;// Remove loading effect when the loading state is complete function completeLoading() { if (document.readyState == "complete") { var loadingMask = document.getElementById('loadingDiv'); loadingMask.parentNode.removeChild(loadingMask); }}2. Effect:
illustrate:
Just put this section of js code into <head> at the end;
The style of the loading effect can be modified according to your own style. You need to find the loading.gif image yourself (many of them are available online).
Click here to download the complete demo instance code.
For more information about jQuery, readers who are interested in this site can view the topics: "Summary of common classic special effects of jQuery", "Summary of commonly used plug-ins and usages of jQuery", "Summary of jQuery table (table) operation skills", "Summary of jQuery form operation skills", "Summary of jQuery operation json data skills", "Summary of jQuery extension skills", "Summary of jQuery drag and drop special effects and techniques", "Summary of Ajax usage in jquery", "Summary of jQuery animation and special effects usage" and "Summary of jquery selector usage"
I hope this article will be helpful to everyone's jQuery programming.