Gridview loading animation using JQuery is a still frame i.e. does not animate

Question

Hello and thanks for looking.

In my earlier project, I was using an UpdatePanel to show the loader gif when I was busy creating data to bind my Gridview with. I wanted to move this part of the code over to JQuery so I replace the UpdatePanel with an img tag linking to the gif after looking at this solution ( Page loading animation )

In my index.html page I had

        <script>

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

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

and I called ShowLoaderImage from the asp:Button I was using to populate the source of the Gridview.

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

I expected the image to start spinning when I click the button to load the GridView, and disappear when done loading the GridView since document.ready is raised then as well. Instead, I see a frozen frame of the gif--no animations. How can I fix this?

Answer 1

I suggest to replace the html in the element

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

After getting data,

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