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%;  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文件中可以供其它页面调用，这样就做到通用了。