EasyUI加载完Html内容样式渲染完成后显示

前端之家收集整理的这篇文章主要介绍了EasyUI加载完Html内容样式渲染完成后显示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

等待页面的css样式加载完毕,Html内容加载完毕,样式生成后再进行展示,避免一开始加载内容后,逐渐渲染样式造成的不良视觉效果,增强用户体验。

新增base-loading.js文件代码如下

61 ? (_PageHeight - 61) / 2 : 0,_LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0; //加载gif地址 var Loadimagerul="/Content/LoadJs/Image/loading.gif"; //在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = '
'; //呈现loading效果 document.write(_LoadingHtml); //监听加载状态改变 document.onreadystatechange = completeLoading; //加载状态为complete时移除loading效果 function completeLoading() { if (document.readyState == "complete") { var loadingMask = document.getElementById('loadingDiv'); loadingMask.parentNode.removeChild(loadingMask); } }

使用的时候,只需要在Head中引入就可以

@*//加载JS动画效果*@

效果如下:引入后,加载Heml内容和样式的时候,会出现加载动画,加载完毕后显示出来,避免逐渐渲染出现的卡顿画面。

渲染完成,一次性显示渲染画面.

以上所述是小编给大家介绍的EasyUI加载完Html内容样式渲染完成后显示。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章