JQuery EasyUI 的加载等待效果....

    前面一直在讲EasyUI的用法，我也是最近在用这个东西，觉得这个组件里面还是有很多问题，很多的不足。比如，如果你加载一个带有弹出框的表格页面，如果加载速度很慢的话会出现下面的效果：

 

 

即很长一段时间会出现窗口没有初始化的效果，等一段时间后就会初始化完成，就没有这个画面，但是如果网速很慢的话会出现想当一段时间的白色，那么如果用户看来，可能会以为效果出了问题。

 

我们如何来解决这个问题呢？最好的方式是加上遮罩层，等待效果。可是我并不想去在找个遮罩组件了，所以我自己从easyUI中提取了等待效果的遮罩。如下图：

 

 

这一个js，可以导入到页面中即可。不用再其他部分添加任何代码.js代码如下：

jgxLoader.js

/**
 *  页面加载等待页面
 *
 * @author gxjiang
 * @date 2010/7/24
 *
 */
 var height = window.screen.height-250;
 var width = window.screen.width;
 var leftW = 300;
 if(width>1200){
 	leftW = 500;
 }else if(width>1000){
 	leftW = 350;
 }else {
 	leftW = 100;
 }
 
 var _html = "<div id='loading' style='position:absolute;left:0;width:100%;height:"+height+"px;top:0;background:#E0ECFF;opacity:0.8;filter:alpha(opacity=80);'>\
 <div style='position:absolute;	cursor1:wait;left:"+leftW+"px;top:200px;width:auto;height:16px;padding:12px 5px 10px 30px;\
 background:#fff url(/wlzl/js/themes/default/images/pagination_loading.gif) no-repeat scroll 5px 10px;border:2px solid #ccc;color:#000;'>\
 正在加载，请等待...\
 </div></div>";
 
 window.onload = function(){
 	var _mask = document.getElementById('loading');
 	_mask.parentNode.removeChild(_mask);
 }

	 
 document.write(_html);
 

 

注意这里的等待效果图 pagination_loading.gif 的位置要指正确。

 

将这个js导入到页面的header中最为最后一个导入的js，只有页面未加载完成就会有效果。可以试试。

 

加载方式如下：

 

不需要在其他地方加任何代码即可实现。

评论

10 楼 760035603 2014-09-03  

  

9 楼 新菜鸟 2013-08-07  

humn_chou 写道

无语，
你说的这个家在直接用
$.messager.progress({
title:'请稍后',
msg:'页面加载中...'
});
啊，页面加载完后 关闭进度条即可啊。

说的很对

8 楼 humn_chou 2013-07-13  

无语，
你说的这个家在直接用
$.messager.progress({
title:'请稍后',
msg:'页面加载中...'
});
啊，页面加载完后 关闭进度条即可啊。

7 楼 xiaoLee 2012-04-13  

非常的不错，只要把样式微调下就OK了谢谢LZ。

6 楼 a535114641 2011-09-29  

不好用啊这个

5 楼 njl_041x 2011-09-26  

Folyred 写道

你麻烦不？？我是这么做的：
$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
$("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});

这就是easyui源码里的处理方式。

看来这位仁兄研究的很有一套啊！佩服佩服。

4 楼 mabinwodejava 2011-06-21  

你好我用你的JS实现加载过程，可以显示，但是是在数据加载完后才显示的，你可不可以给我一个例子。我的邮箱 [e-mail] qq :411125953 谢谢

3 楼 lai555 2011-01-07  

好像 没效果.

2 楼 hhww0101 2010-11-13  

加上了怎么去掉呢

1 楼 Folyred 2010-08-21  

你麻烦不？？我是这么做的：
$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
$("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});

这就是easyui源码里的处理方式。