首 页最新软件下载排行文章资讯投稿发布下载专题
维维下载站
您的位置:首页编程开发网页制作Javascript → EasyUI闪屏EasyUI页面加载提示例子(原理代码及效果图)

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

来源:本站整理 发布时间:2016-2-21 18:14:05 人气:

本文主要为大家详细展示了EasyUI闪屏EasyUI页面加载提示实现例子,在使用EasyUI的时候,有一个经常会遇到的问题,那就是页面还未渲染完成的时候就展现了。刚开始会非常混乱,等加载完成以后就好了。

$.parser.onComplete,这一个是在所有组件解析完成后执行的事件。其实这一个事件非常有用。不少在布局用到easyui时总会出现一个问题,那就是在一进入主界面时,页面并非立即就展现,而是会有一个混乱的过程,然后一闪就又好了。

其实这一个问题就是因为easyui是在dom载入完毕以后才会对整个页面进行解析,当布局和组件使用的比较多时,完整的解析组件就需要一个过程,而在这一过程中就会出现短暂的界面混乱现象了。

EasyUI闪屏EasyUI页面加载提示例子

EasyUI闪屏EasyUI页面加载提示示例

要解决这一问题其实只需好好利用这一个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>
相关下载
栏目导航
本类热门阅览