博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EasyUI-加载完Html内容样式渲染完成后显示
阅读量:7101 次
发布时间:2019-06-28

本文共 1038 字,大约阅读时间需要 3 分钟。

等待页面的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 = '
玩命加载中...
';//呈现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动画效果*@    

 

转载自:http://www.cnblogs.com/heyangyi/archive/2016/07/25/5703851.html

转载于:https://www.cnblogs.com/youguess/p/7382880.html

你可能感兴趣的文章
树莓派与window 10组成的物联网核心:让人失望
查看>>
《生活在Linux中》之:在Bash的Emacs模式中使用Vim
查看>>
HDOJ 5411 CRB and Puzzle 矩阵高速幂
查看>>
[LeetCode] Maximum Vacation Days 最大化休假日
查看>>
Microsoft Word、Excel、PowerPoint转Pdf
查看>>
Servlet概述
查看>>
Servlet的异常处理
查看>>
支付宝 app支付 沙盘使用
查看>>
Redis持久化配置-AOF
查看>>
计算机网络的应用层简单介绍:
查看>>
需求管理之客户需求何时休?
查看>>
Java进化? Kotlin初探与集成Android项目
查看>>
URL中的#
查看>>
CentOS自带mysql配置(密码更改、端口开放访问、添加进系统启动项)
查看>>
MYSQL中动态行数据转列数据
查看>>
anchor_target_layer中的bounding regression
查看>>
[转]怎么解决输入流和输出流编码问题
查看>>
Linux下Jenkins服务器搭建
查看>>
pavenet资源
查看>>
【WPF】在MenuItem中下划线“_”显示不正常
查看>>