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 相关文章推荐
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
JS实现拖动示例代码
Nov 01 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
js图片上传的封装代码
Aug 01 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
js页面加载后执行的几种方式小结
Jan 30 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
第一节--面向对象编程
2006/11/16 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
实现PHP搜索加分页
2016/10/12 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python学生管理系统开发
2019/01/30 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
几个MySql的面试题
2013/04/22 面试题
志愿者活动总结
2014/04/28 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
水利水电专业自荐信
2014/07/08 职场文书
护理工作个人总结
2015/03/03 职场文书
合理化建议书范文
2015/09/14 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android