Conflict between GridViewScroll and Loading image in ASP.NET WebForms

The problem is that you are using jquery together with asp.net events, that combination never got along. If the idea is to use events, it could help you with the ajax toolkit controls, such as UpdateProgress

[How Do I:] Use the ASP.NET AJAX UpdateProgress Control?

I must tell you that jquery and asp.net with their events do not get along, you should evaluate avoid using events and perform operations using ajax, if you use jquery you could implement $.ajax to invoke some webmethod defined in aspx

greetings

I've done a little test (I was intrigued by the GridViewScroll library because I did not know it) and it worked for me correctly.

I think the problem is not in an incompatibility between GridViewScroll and the loading image. It may be the latter that causes problems with your design.

Here I leave a fragment of my code (you have it complete in this GitHub Gist)

<asp:GridView ID="GridView1" runat="server"></asp:GridView>
<div class="loading" align="center">
    Loading. Please wait.<br /><br />
    <img src="Content/Images/loader.gif" alt="" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://gridviewscroll.aspcity.idv.tw/Scripts/gridviewScroll.min.js?20130319"></script> 
<script type="text/javascript"> 
    $(document).ready(function () { 
        gridviewScroll();

        $('form').live("submit", function () {
            ShowProgress();
        });
    }); 
    function gridviewScroll() { 
        $('#<%=GridView1.ClientID%>').gridviewScroll({ 
            width: 400, 
            height: 200, 
            freezesize: 1 
        }); 
    } 
    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left });
        }, 200);
    }
</script>

The first thing I recommend is that you check if a javascript error is being generated, in which case it would be good if you would place it here in order to better identify the case.

On the other hand, I recommend you an excellent jQuery library that I have used in several projects to show a "loading" while doing processes on a page: link in the examples you can see that you can put the loading at the level of the whole page or at the level of an element according to your needs.

Greetings.