使用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>

EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图的更多相关文章

  1. vue页面加载前显示{{代码}}的原因及解决办法

    进入正题,简单说说自己对html中出现{{}}的原因及解决办法: 这样写的话,就会出现{{}}一闪的情况: 原因:html的加载顺序: 解析html结构 -> 加载外部脚本和样式表文件 -> ...

  2. RookeyFrame 通用页面 加载数据 原理

    说明: 我是一步一步跳转进去的哈 测试的功能:通用列表页面的普通查询 点一下查询按钮,就能看到请求的地址:/DataAsync/LoadGridData.html 1.DataController - ...

  3. 基于css3炫酷页面加载动画特效代码

    基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  4. Selenium简单测试页面加载速度的性能(Page loading performance)

    利用selenium的可以执行javascript脚本的特性,我写了一个java版本的获得页面加载速度的代码,这样你就可以在进行功能测试的同时进行一个简单的测试页面的加载速度的性能测试. 我现在的项目 ...

  5. PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题

    PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...

  6. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点

    jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...

  7. easyUI slider滑块,在加载出来后,easyUI slider滑块禁用方法

    easyUI slider滑块禁用 如下图easyUI slider滑块,在加载出来后,需要禁止拉动 easyUI slider滑块禁用方法 //禁用$(s1).slider({ disabled:t ...

  8. 前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示 blocked by CORS policy

    1.前言 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示Access to script at ftp:///xxx.js ...

  9. JS实现页面加载完毕之前loading提示效果

    1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...

随机推荐

  1. POJ 3130

    这题,加了精度错了,不加精度反而对了... #include <iostream> #include <cstdio> #include <cstring> #in ...

  2. uva 10479(找规律+递归)

    题意:有一个初始序列第一个数字是0. 规律是把前一次推出来的每个数字x.先接x个0,然后接x+1. 0 –> 1 –> 02 –> 1003 –> 02110004 那么这个序 ...

  3. Xcode6+Cocos2d-x真机调试 报错

    眼下真机调试时遇到下面问题. Undefined symbols for architecture arm64: "_png_get_io_ptr", referenced fro ...

  4. sqlite3树形结构遍历效率对照測试

    sqlite3树形结构遍历效率对照測试 一.缘起 项目数据结构:本人从事安防行业,视频监控领域.项目中会遇到监控点位的组织机构划分.暂时划分的巡逻点位等.这些相机点位.连同组织机构,它们在逻辑关系上构 ...

  5. [HTML] 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

  6. [JavaEE] IBM - Spring 系列: Spring 框架简介

    Spring AOP 和 IOC 容器入门 在这由三部分组成的介绍 Spring 框架的系列文章的第一期中,将开始学习如何用 Spring 技术构建轻量级的.强壮的 J2EE 应用程序.develop ...

  7. 从Oracle同步数据到SQLServer——大小写敏感设置

    Oracle默认是大小写敏感,而SQLServer默认大小写不敏感, 尤其是涉及主键字段时,注意请提前设置SQLServer对应的数据库表为大小写敏感,不然会报主键冲突的错误. 设置表内大小写敏感 A ...

  8. 如何参加topcoder

    1.注册账号 2.安装java运行环境 3.下载客户端 4.提示:应用程序已被java安全阻止:控制面板里找到java,将topcoder.com添加到安全列表 5.运行客户端

  9. pc端和移动端的轮播图实现(只是结构,内容以后慢慢补充)

    轮播图 PC端 移动端 原生js的写法 图片顺序 8123456781 设置计时器 当过度完成之后判断index是否到达两边界限,是的话设置位移 手指touchstart时,获取位置,暂停计时器 手指 ...

  10. 关于中文期刊LaTeX的CCT相关

    最近写完了大论文,回身看了一下CTeX的信息,看了下弄改进版套装的山大和清华的两位大神的博客,发现大神们倒腾过CCT. CCT的FTP还是一直可用的,ftp://ftp.cc.ac.cn/pub/cc ...