Home>

Wait for the css style of the page to load,html content is loaded,After the style is generated, it is displayed.Avoid loading content at the beginning,Bad visual effects caused by gradually rendering styles,Enhance the user experience.

Added base-loading.js file, the code is as follows

//Get the browser page visible height and width
var _pageheight=document.documentelement.clientheight,_pagewidth=document.documentelement.clientwidth;
//Calculate the distance of the loading box from the top and left (the width of the loading box is 215px and the height is 61px)
var _loadingtop=_pageheight>61?(_pageheight-61)/2:0,_loadingleft=_pagewidth>215?(_pagewidth-215)/2:0;
//Load the gif address
var loadimagerul="/content/loadjs/image/loading.gif";
//loading html custom content displayed before the page is not loaded
var _loadinghtml="<div + _pageheight +" px;top:0;background:#f3f8ff;opacity:1;filter:alpha (opacity=80);z-index:10000;"<div + _loadingleft + "px;top:" + _loadingtop + "px;width:100px ;;height:57px;line-height:57px;padding-left:50px;padding-right:5px;background:#fff url (" + loadimagerul + ") no-repeat scroll 5px 12px;border:2px solid #95b8e7;color:#696969;font-family:\ "microsoft yahei \";">Playload loading.
..</div></div>";
//Presenting loading effect
document.write (_loadinghtml);
//Listen to loading state changes
document.onreadystatechange=completeloading;
//Remove loading effect when loading status is complete
function completeloading () {
if (document.readystate == "complete") {
var loadingmask=document.getelementbyid ("loadingdiv");
loadingmask.parentnode.removechild (loadingmask);
}
}

When used,Just need to introduce in the head

@ * //Load js animation effect * @

<script src="~/content/loadjs/base-loading.js"></script>

The effect is as follows:After the introduction, when loading the heml content and style,Loading animation will appear,It appears after loading.Avoid progressive rendering of stuttered images.

Rendering is complete,Display rendered images at once.

  • Previous PHP integrated dynamic password authentication
  • Next Analysis of set_include_path () function usage in PHP