Question

我试图在按钮点击时显示动画GIF，但它在IE（8,9）中被冻结，适用于IE11，FF和Chrome。

是否有任何解决方法。

这是html代码;

   <!DOCTYPE html>

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">


        <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <title></title>

            <style type="text/css">

            .cssbox-progress { 
            background-image: url('images/3.gif'); 
            background-repeat: no-repeat;  
            }

            .loading
            {
                width: 50px;
                height: 10px;
                 display: none;
                background-color: White;                  
            }

        </style>

        <script >
            function ShowProgress() {
                setTimeout(function () {

                    var loading = $(".loading");
                    loading.show();
                }, 200);
            }
            function test() {
                ShowProgress();
            }

        </script>

        </head>
        <body>
            <form id="form1" runat="server">
                 <div class="loading" align="center" style="width: 50px; height: 10px; ">

                <div class="cssbox-progress" style="width: 50px; height: 10px;"></div>

                </div>

      <asp:Button ID="btn" runat="server" Text="Login" onclientclick ="test()"  />


            </form>
        </body>
        </html>

动画GIF

enter image description here

Answer 1

在回应评论时，情况如下： 1-你需要显示一个＆＃34; loading＆＃34; GIF动画。 2-在IE 8/9中没有动画gif。 3-您需要更改css中的来源，因为您正在使用主题。

，答案是

<style>
.cssbox-progress { 
     content: url('http://i.stack.imgur.com/dS784.gif'); 
}
</style>

和

<img class="cssbox-progress" />

我没有在IE 8/9上测试它，但我使用插件来测试它的样子，但你应该测试它以确保它。

动画GIF在IE中停止，但在FF和Chrome中有效

1 个答案: