EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图
来源:互联网 发布:网络规划与设计题库 编辑:程序博客网 时间:2024/05/16 19:38
使用EasyUI时,有个经常遇到的问题,页面还没有渲染完成的时候,就展现了。
刚刚开始很混乱,等加载完成后,就好了。
参考这篇文章http://blog.csdn.net/zheng0518/article/details/12287801 搞定了。
$.parser.onComplete,这个是在所有组件解析完成后执行的事件。其实这个事件很有用的。很多在布局用到easyui的时候总会出现一个问题。就是在一进入主界面的时候,页面的并不是马上就展现,而是会有一个混乱的过程,之后一闪就又好了。
其实这个就是因为easyui是在dom载入完毕之后才会对整个页面进行解析,当你们布局和组件使用的比较多的时候,完整的解析组件就需要一个过程,而在这个过程中就会出现短暂的界面混乱现象。
要解决这个问题其实只要好好利用这个onComplete 事件在结合一个载入遮罩就解决问题了。
把需要这个动画效果的,放到一个页面中去。
<#include "common/loadingDiv.html"/>(Freemarker的include语法,模版用的.html后缀)
loadingDiv.html
<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>
2 0
- EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图
- easyui页面加载提示
- easyui页面加载提示
- easyUI 复杂表头(效果图) &&代码
- easyUI复杂表头(效果图)&&代码
- EasyUI 页面加载等待
- easyui-ssh后台管理效果图
- 基于easyui的页面等待提示层遮罩
- easyui datagrid请求数据失败,页面提示
- EasyUI实现页面右下角弹出提示框
- easyUI设计页面元素信息提示框
- easyui 加载
- easyui-layout与easyui-datagrid完整页面代码
- JQery easyui 页面加载等待信息
- easyui为页面加载添加遮罩层
- jsp 页面刷新,EasyUI刷新、加载
- (一)jQuery EasyUI 的EasyLoader加载原理
- EasyUI tree 加载数据 前后台代码
- 人脸识别必读的N篇文章
- Android汉字转拼音HanziToPinyin实测可用版
- vector::clear()和vecotr::pop_back()对内存处理的不同 http://blog.csdn.net/vieri_ch/article/details/1191390
- 关于__stack_chk_guard_ptr的理解
- LeetCode_3_LongestSubstringWithoutRepeatingCharacters(Java Code)
- EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图
- android存储-sqlite
- Swift引用OC代码(导入FMDB库)
- JS简单粗暴地实现浅克隆
- Windows - 卸载一键工作室急救箱
- android菜单栏Menu
- 删除vector容器中的对象元素的三种方法:pop_back, erase与remove算法http://www.xuebuyuan.com/1407838.html
- Theano-Deep Learning Tutorials 笔记:Modeling and generating sequences of polyphonic music with the RNN
- 二叉树——基本概念