jquery，js,加载等待的效果

 
即很长一段时间会出现窗口没有初始化的效果，等一段时间后就会初始化完成，就没有这个画面，但是如果网速很慢的话会出现想当一段时间的白色，那么如果用户看来，可能会以为效果出了问题。
 
我们如何来解决这个问题呢？最好的方式是加上遮罩层，等待效果。可是我并不想去在找个遮罩组件了，所以我自己从easyUI中提取了等待效果的遮罩。如下图：


 
 
这一个js，可以导入到页面中即可。不用再其他部分添加任何代码.js代码如下：
jgxLoader.js
Java代码  
/** 
 *  页面加载等待页面 
 * 
 * @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，只有页面未加载完成就会有效果。可以试试。
 
加载方式如下：
 
不需要在其他地方加任何代码即可实现。