easyUI页面加载完成前不显示样式问题解决方案

  easyUI页面中好多元素是通过ajax异步加载的，当请求缓慢是页面会先暂时出现没有easyUI样式的元素内容，用户体验很差，可以采用页面加载完成前添加遮罩的方法进行解决该问题。

实现代码如下：

 /**  
 2  *  页面加载等待页面  
 3  *  
 4  * @author gxjiang  
 5  * @date 2010/7/24  
 6  *  
 7  */  
 8  var height = window.screen.height-250;   
 9  var 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);