Js 创建等待画面并不难

一直以来，我都以为创建等待画面很难。但仔细想了下，并不难实现。
这理我用框架页面为例。框架页代码如下：

< frameset  oncontextmenu ="return(false)"  id ="f1"  onhelp ="window.showHelp('help.htm');return false"
    border ="0"  framespacing ="0"  rows ="80,*,20,0"  frameborder ="NO"  cols ="*" >
     <% -- Top 页面 -- %>
     < frame  id ="topwin"  src ="FrmTopCustoms.aspx"  scrolling ="no" >
     < frameset  id ="middlewin"  onhelp ="window.showHelp('help.htm');return false"  border ="0"
        framespacing ="0"  rows ="*"  frameborder ="NO"  cols ="150,8,*" >
         <% -- 显示左边菜单 页-- %>
         < frame  name ="leftwin"  src ="<%=Session[" prDefaultMenu"].ToString()% > " noresize scrolling="auto">
         < frame  marginwidth ="0"  marginheight ="0"  src ="FrmRightFrame.aspx"  frameborder ="0"
            noresize scrolling ="no" >
         <% -- 转到内容页面 -- %>
         < frame  name ="content"  src ="Content.aspx"  noresize scrolling ="yes"  style ="overflow: hidden;
            height: 100%; width: 100%;" >
     </ frameset >
     <% -- Button页面 -- %>
     < frame  src ="FrmBottom.aspx"  noresize scrolling ="no" >
</ frameset >

我们以可以找一个等待的动画。
当需要加载时，创建或显示此动画。比如通过按钮抓取数据时，触发创建此动画的方法(如：onclick="CreateWaitDiv()")。代码如下：

// 创建一个等待
function  CreateWaitDiv()  
  {
       var  vframe  =  self.parent.frames[ " topwin " ]; // 顶边的框架
       if (vframe != null )
      {
           var  vImg  =  document.createElement( " img " );
          vImg.src = ' http://www.cnblogs.com/Images/HelpDeskImg/waiting.gif ' ; // 图片地址
          vImg.id = ' imgWait ' ;
           with (vImg.style)  
          {  
              position    =     " absolute " ;  
              left    =     " 600px " ;  
              top    =     " 5px " ;  
              zIndex    =     " 999 " ;  
          }
            // 创建其中的Div
           vframe.document.body.appendChild(vImg);
      }
  }

加载完成后（可以在被调用页面的使用onload事件，代码：onload="RemoveWaitDiv();"），删除或不显示此动画。

// 册除等待
function  RemoveWaitDiv()  
  {
     var  vframe  =  self.parent.frames[ " topwin " ]; // 你的框架   
     if (vframe != null )
    {
         var  vImg = vframe.document.getElementById( " imgWait " );
         if (vImg != null )
        {
             // 创建其中的Div
            vframe.document.body.removeChild(vImg);
        }
    }    
  }  

效果如下图：

因为页面顶部一般不变更，将以上Js放入Js文件中可以供其它页面调用，这样就做到通用了。