easyui为页面加载添加遮罩层

来源:互联网 发布:一次性乳胶手套淘宝 编辑:程序博客网 时间:2024/05/20 18:50
前面一直在讲EasyUI的用法,我也是最近在用这个东西,觉得这个组件里面还是有很多问题,很多的不足。比如,如果你加载一个带有弹出框的表格页面,如果加载速度很慢的话会出现下面的效果:

 

 

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

 

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



 

 

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

jgxLoader.js

Java代码 复制代码 收藏代码
  1. /**  
  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);   
  32.    

 

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

 

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

 

加载方式如下:

 

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