如何使用在Web應用程序

Question

我有一個帆布HTML5 Web應用程序的spinning.gif圖像： -

我試圖同時在畫布上通過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有一個文本框。一旦用戶在文本框中輸入信息並按下提交按鈕，整個頁面應該到達背景並且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但瀑布回到舊版瀏覽器。