如何在web应用程序上使用spinning.gif映像

Question

我有一个画布html5网络应用程序：-

在通过sql查询加载画布时，我试图添加'spinning.gif‘图像。

<div id="someHiddenDiv" style="display:none;"><img src="/../spinner.gif"/>... Please Wait, the Browser is Working ...</div>

到目前为止，我认为这是我的剧本，以产生我的想法。

然而，这也存在一些问题。

1)图像不是完全可见的，因为我页面的顶部是一个面板(文本框、按钮)，其余的是一个画布800×950 (它也可以从一边滚动到另一边)。2)图像不居中。3)字母不可见，因为面板的高度足够短，足以显示spinning.gif图像的前4个圆圈。

我最理想的愿望是：-

面板-1有一个文本框。一旦用户在文本框中输入信息并按submit按钮，整个页面就会转到后台，spinning.gif图像应该会显示在前台。一旦查询完成(Ajax)，画布就会被绘制，spinning.gif图像就会消失，页面就会变得难以处理。

这是我页面的开头：-

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <span class="style1"><strong>&nbsp;<asp:Panel ID="Panel1" runat="server" BackColor="#999966"
        BorderStyle="Double" Height="129px" Style="margin-top: 0px" Width="913px">
        &nbsp; <span class="style2">&nbsp;Enter Member ID: </span>
        <br />
        &nbsp;&nbsp;<asp:TextBox ID="TextBox3" runat="server" BackColor="Silver" 
            BorderColor="Silver" Height="20px" Style="margin-left: 6px" Width="136px"></asp:TextBox>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="Button6" runat="server" BackColor="Silver" Font-Bold="True" 
            Height="28px" OnClientClick="store_memID(); return false;" 
            Style="margin-left: 20px" Text="Submit" Width="78px" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<asp:TextBox ID="TextBox4" runat="server" BackColor="#99FF99" 
            BorderColor="Gray" BorderStyle="Double" BorderWidth="2px" 
            Font-Names="Arial Unicode MS" Font-Size="Smaller" ForeColor="Black" 
            Height="77px" OnTextChanged="TextBox4_TextChanged" ReadOnly="True" Rows="3" 
            Style="margin-left: 0px; margin-top: 0px;" TextMode="MultiLine" Width="193px"></asp:TextBox>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="Button7" runat="server" BackColor="Silver" BorderStyle="Groove" Text="&lt;&lt;&lt; Past"
            Width="69px" Height="23px" style="margin-top: 0px" />
        <asp:Button ID="Button8" runat="server" BackColor="Silver" BorderStyle="Groove"
            Style="margin-left: 28px" Text="Future &gt;&gt;&gt;" Width="78px" 
            Height="23px" />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="Button9" runat="server" BackColor="Silver" Text="Today" Width="63px"
            Font-Bold="True" Height="23px" onclick="Button9_Click" />



                 <%--       <asp:UpdateProgress ID="pnlWait" AssociatedUpdatePanelID="Panel1" runat="server">
                        <ProgressTemplate>
                           <div style="padding: 0px; margin: 0px; width: 100%; text-align: center;">
                        <img src="/../spinner.gif" alt="Please wait..." style="padding: 0px;
                            margin: 0px" />
                        <span style="font-size: small; color: #8969A5;">Finding your search. Please
                            wait...</span>
                           </div></ProgressTemplate></asp:UpdateProgress>--%>
<%--
       <p align="center"><asp:Image ID="ImageStatus" ImageUrl="/../spinner.gif" runat="server" />
       <h1><asp:Label ID="lblStatus" runat="server" Text="Loading Please wait..."></asp:Label></h1></p>
        --%>

<div id="someHiddenDiv" style="display:none;"><img src="/../spinner.gif"/>... Please Wait, the Browser is Working ...</div>

    </asp:Panel>
        <br />
    </strong></span>





    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>





    <canvas id="myCanvas" width="915" height="850" style="border: 2px double #000000;"></canvas>
    <canvas id="balloon" width=105 height=105></canvas>

    <script type="text/javascript">

Answer 1

我很幸运地将spin.js用于这类纺丝器：http://fgnass.github.io/spin.js/

它是一个很好的库，使用CSS，但是回到了旧的浏览器上。