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

2013-01-04 14:42:15|  分类： JQuery |  标签：easyui  加载等待效果  |举报|字号 订阅

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

 

 

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

 

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

 

 

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

jgxLoader.js

Java代码  

1. /** 
2.  *  页面加载等待页面 
3.  * 
4.  * @author gxjiang 
5.  * @date 2010/7/24 
6.  * 
7.  */  
8.  var height =$(window).height();// window.screen.height-250;  //
9.  var width =$(window).width();// window.screen.width;  
10.  var leftW = 300;  
11.  if(width>1200){  
12.     leftW = 500;  
13.  }else if(width>1000){  
14.     leftW = 350;  
15.  }else {  
16.     leftW = 100;  
17.  }  
18.    
19.  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);'>\  
20.  <div style='position:absolute;  cursor1:wait;left:"+leftW+"px;top:200px;width:auto;height:16px;padding:12px 5px 10px 30px;\  
21.  background:#fff url(/wlzl/js/themes/default/images/pagination_loading.gif) no-repeat scroll 5px 10px;border:2px solid #ccc;color:#000;'>\  
22.  正在加载，请等待...\  
23.  </div></div>";  
24.    
25.  window.onload = function(){  
26.     var _mask = document.getElementById('loading');  
27.     _mask.parentNode.removeChild(_mask);  
28.  }  
29.   
30.        
31.  document.write(_html);  
32.    

 

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

 

alert($(window).height()); //浏览器当前窗口可视区域高度 

alert($(document).height()); //浏览器当前窗口文档的高度 

alert($(document.body).height());//浏览器当前窗口文档body的高度 

alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin 

alert($(window).width()); //浏览器当前窗口可视区域宽度 

alert($(document).width());//浏览器当前窗口文档对象宽度 

alert($(document.body).width());//浏览器当前窗口文档body的高度 

alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin 

 

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

 

加载方式如下：

 

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