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


Posted in Javascript onJuly 25, 2016

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

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

//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
_PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px)
var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
_LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
//加载gif地址
var Loadimagerul="/Content/LoadJs/Image/loading.gif";
//在页面未加载完毕之前显示的loading Html自定义内容
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: #fff url('+Loadimagerul+') no-repeat scroll 5px 12px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">玩命加载中...</div></div>';
//呈现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动画效果*@

<script src="~/Content/LoadJs/base-loading.js"></script>

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

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

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

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

以上所述是小编给大家介绍的EasyUI加载完Html内容样式渲染完成后显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
前端微信支付js代码
Jul 25 #Javascript
javascript与jquery动态创建html元素示例
Jul 25 #Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 #Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 #Javascript
js微信分享API
Oct 11 #Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 #Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 #Javascript
You might like
PHP strtok()函数的优点分析
2010/03/02 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
python如何制作缩略图
2019/04/30 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
如何用python批量调整视频声音
2020/12/22 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
一个C/C++编程面试题
2013/11/10 面试题
SQL Server面试题
2016/10/17 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
网络维护中文求职信
2014/01/03 职场文书
生日宴会答谢词
2014/01/09 职场文书
财务会计专业求职信
2014/06/09 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
公司董事任命书
2015/09/21 职场文书
小学运动会开幕词
2016/03/04 职场文书