javascript - 使用 JQuery 的 Gridview 加载动画是静止帧，即不动画

Question

您好，感谢您的关注。

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

在我的 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 的冻结帧——没有动画。我怎样才能解决这个问题？

Answer 1

我建议替换元素中的html

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

拿到数据后，

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