【EasyUI】——页面加载闪屏问题
来源:互联网 发布:javascript好不好 编辑:程序博客网 时间:2024/05/18 03:59
引言
这个问题,做项目的时候真的很伤脑筋,页面展示很难看,强迫症根本受不了啊!终于终于,小编找到解决的办
法了。
页面加载原效果
小编不知道有多少人看过这个页面,如果我是用户,反正我是觉得糟心。
优化之后效果
界面是不是友好多了!下边看看如何实现吧~其实超简单!
实现原理
其实只需要在乱码的页面上加一个小小的页面处理就好了,引入:
<%@ include file="../common/loadingDiv.jsp"%>
loadingDiv.jsp文件内容:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><div id='loadingDiv' style="position: absolute; z-index: 1000; top: 0px; left: 0px;width: 100%; height: 100%; background: white; text-align: center;"> <h1 style="top: 48%; position: relative;"> <font color="#15428B">努力加载中···</font> </h1></div><script type="text/JavaScript"> function closeLoading() { $("#loadingDiv").fadeOut("normal", function () { $(this).remove(); }); } var no; $.parser.onComplete = function () { if (no) clearTimeout(no); no = setTimeout(closeLoading, 1000); }</script>
里边最重要的一句话:$:parser.onComplete.这个是在所有组件解析完成后执行的事件。其实这个事件很有用
的。很多在布局用到easyui的时候总会出现一个问题。就是在一进入主界面的时候,页面的并不是马上就展现,而是
会有一个混乱的过程,之后一闪就又好了。
其实这个就是因为easyui是在dom载入完毕之后才会对整个页面进行解析,当你们布局和组件使用的比较多的时
候,完整的解析组件就需要一个过程,而在这个过程中就会出现短暂的界面混乱现象。
要解决这个问题其实只要好好利用这个onComplete 事件在结合一个载入遮罩就解决问题了。
总结
之前的问题,也算是解决了,不过解决办法比较土,用的css样式的display,让页面完全加载出来,再给display
赋值为block,但是这次没有成功,也幸亏没成功,不然都不知道大家都有这个问题呢~~~果然,发现问题,比解决问
题,更有学问~~~
阅读全文
0 0
- 【EasyUI】——页面加载闪屏问题
- 关于easyui加载子页面无法加载js问题
- easyui页面加载提示
- easyui页面加载提示
- EasyUI 页面加载等待
- jquery easyui window href加载页面,子页面JS失效问题
- 【easyui】解决easyui闪屏问题
- JQuery EasyUI 学习——使用EasyUI 页面布局
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- jquery easyui combobox加载数量过多引起渲染页面缓慢问题
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- EasyUI的window加载的页面不执行js问题说明
- 关于EasyUI中的treegrid数据在页面加载慢的问题
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- 解决使用easyui的datagrid组件页面加载后发送两次请求的问题
- easyui datagrid 加载大量数据时,页面渲染速度慢问题
- JQery easyui 页面加载等待信息
- ubuntu16.04 安装GeForce1080驱动+CUDA8.0
- ubuntu1604常用快捷键
- 上传多图发布 微信小程序
- matlab问题:输出结果出现分数,且分子分母都是很长数字
- java获得url的端口号
- 【EasyUI】——页面加载闪屏问题
- iOS UIApplicationMain
- 五 iOS之 绘制文字和图片
- 幂等
- [Android]笔记19:RatingBar的功能与用法
- 求一个整数二进制中1的个数
- Java_基础—字符流的拷贝
- CF821E:Okabe and El Psy Kongroo(dp & 矩阵)
- 动态规划--背包计数--hdu2079选课时间