Wait for the page's css style to load, the Html content is loaded, and then display it after the style is generated, avoiding the adverse visual effects caused by gradually rendering the style after the content is loaded at the beginning, and enhancing the user experience.
Added the base-loading.js file, the code is as follows
//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;//Loading gif address var Loadimagerul="/Content/LoadJs/Image/loading.gif";//LoadingHtml 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:1;filter:alpha(opacity=80);z-index:10000;"><div style="position:absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width:100px; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #ffff url('+Loadimagerul+') no-repeat scroll 5px 12px; border: 2px solid #95B8E7; color: #696969; font-family:/'Microsoft YaHei/';">Fast loading...</div></div>';//Represent loading effect document.write(_LoadingHtml);//Speak up the loading state to change 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);}}When using it, you only need to introduce it in the head
@*//Load JS animation effect*@
<script src="~/Content/LoadJs/base-loading.js"></script>
The effect is as follows: After introduction, when loading Heml content and styles, a loading animation will appear, which will be displayed after loading to avoid the stuttering screen gradually rendering.
The rendering is completed and the rendering screen is displayed at one time.
The above is what the editor introduced to you. After the EasyUI is loaded, the content style rendering of the HTML content is displayed. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!