javascript - Web アプリケーションで spin.gif 画像を使用する方法

Question

私はキャンバスhtml5 Webアプリを持っています:-

キャンバスがSQLクエリを介してロードされている間に、「spinning.gif」画像を追加しようとしています。

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

これまでのところ、私はこれを自分のアイデアを生み出すスクリプトとして考えてきました。

ただし、これにはいくつかの問題があります。

1) ページの上部はパネル (テキスト ボックス、ボタン) であり、残りは 800 x 950 のキャンバス (左右にスクロール可能) であるため、画像が完全に表示されません。2) 画像が中央に配置されていません。3) パネルの高さが、spinning.gif 画像の最初の 4 つの円を表示するのに十分なほど短いため、文字は表示されません。

私が理想的に望むもの：-

panel-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">