EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)


Posted in Javascript onFebruary 21, 2016

使用EasyUI时,有个经常遇到的问题,页面还没有渲染完成的时候,就展现了。

刚刚开始很混乱,等加载完成后,就好了。

$.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> 
t;/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>

EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)

以上内容是小编给大家介绍的EasyUI闪屏EasyUI页面加载提示,希望对大家以上帮助!

Javascript 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 #Javascript
JavaScript编程学习技巧汇总
Feb 21 #Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 #Javascript
JSON简介以及用法汇总
Feb 21 #Javascript
javascript实现计时器的简单方法
Feb 21 #Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 #Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 #Javascript
You might like
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
微信小程序开发探究
2016/12/27 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
python的常用模块之collections模块详解
2018/12/06 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python七夕浪漫表白源码
2019/04/05 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python同时迭代多个序列的方法
2020/07/28 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
青年教师典范事迹材料
2014/01/31 职场文书
学生会部长竞聘书
2014/03/31 职场文书
碧霞祠导游词
2015/02/09 职场文书
公务员个人年终总结
2015/02/12 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
化工厂员工工作总结
2015/10/15 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
nginx rewrite功能使用场景分析
2022/05/30 Servers