使用 JQuery 的 Gridview 加载动画是静止帧，即没有动画答案

【问题标题】：Gridview loading animation using JQuery is a still frame i.e. does not animate使用 JQuery 的 Gridview 加载动画是静止帧，即没有动画
【发布时间】：2013-03-27 12:47:38
【问题描述】：

您好，感谢您的关注。

在我早期的项目中，当我忙于创建数据以绑定我的 Gridview 时，我正在使用 UpdatePanel 来显示加载程序 gif。我想将这部分代码移至 JQuery，因此在查看此解决方案后，我将 UpdatePanel 替换为链接到 gif 的 img 标签 (Page loading animation)

在我的 index.html 页面中，我有

        <script>

        $(document).ready(function () {
            $('#loadingImage').hide();
        });

        function ShowLoaderImage() {
            $('#loadingImage').show();
        }
    </script>

我从我用来填充 Gridview 源的 asp:Button 中调用了 ShowLoaderImage。

<asp:Button ID="View_Data_Button" CssClass="dataButton" OnClick="View_Data_Button_Click" OnClientClick="ShowLoaderImage()" runat="server" Text="View Data" />

我希望当我单击按钮加载 GridView 时图像开始旋转，并在加载 GridView 后消失，因为 document.ready 也随之引发。相反，我看到了 gif 的冻结帧——没有动画。我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery button gridview loading

【解决方案1】：

我建议替换元素中的html

        $('#data_loding_div').html('<img  alt="loadingImage" src="/images/loadingImage.gif" />')

获取数据后，

 $('#data_loding_div').html(data);

【讨论】：