0

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

我正在尝试在通过 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) 字母不可见，因为面板的高度足够短，无法显示 spin.gif 图像的前 4 个圆圈。

我最理想的情况是：-

panel-1 有一个文本框。一旦用户在文本框中输入信息并按下提交按钮，整个页面应该进入后台，而 spin.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">
4

1 回答 1

1

I've had great luck using spin.js for these kinds of spinners: http://fgnass.github.io/spin.js/

It's a great library, uses CSS but falls back on older browsers.

于 2013-05-13T19:41:42.877 回答