Javascript 捕获触发回发的任何事件，并在将数据发送到服务器之前触发事件

有没有办法捕获任何触发母版页回发的事件，并显示页面加载程序，直到页面完全加载？ 澄清一下，我希望页面加载器在按下按钮或dropdownlist更改值后立即显示。 我目前在母版页上使用此脚本

$(document).ready(function () {
    //it just changes style of body to display:block hiding an existing pageloader
    $('body').addClass('loaded');
});

但这段代码发生的情况是，一旦我发出回发，页面可能需要5到10秒才能加载（等待服务器用sql数据响应），只有在这之后才会触发javascript事件

下面是一个下拉列表，用于触发母版页的

ContentPlaceHolder

内的回发：

<asp:DropDownList ID="DropDownListSubproject" runat="server" DataSourceID="SqlDataSourceDDLSprj" 
        DataTextField="SubProject" DataValueField="SubProjectID" CssClass="TextBox" AutoPostBack="true">
    <asp:ListItem Text="Select Subproject..." Value="0"></asp:ListItem>
</asp:DropDownList>

---

根据JKOU的建议，我在母版页中使用了UpdatePanel，并将我的ContentPlaceHolder包含在UpdatePanel的ContentTemplate中。同时，在UpdateProgress模板中，我附带了我的预加载程序。在没有javascript的情况下，它都可以正常工作

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
               <Triggers> 
                  <asp:AsyncPostBackTrigger ControlID="MainContent" /> 
               </Triggers>                                     
               <ContentTemplate> 
                    <div class="main">       
                        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>                                   
                        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>   
                    </div>
                    <asp:Button ID="hiddenAsyncTrigger" runat="server" Text="AsyncUpdate" style="display:none;" />
               </ContentTemplate>                                  
            </asp:UpdatePanel>    
            <asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1"> 
                <ProgressTemplate > 
                    <div id="loader-wrapper"> //My PageLoader animation
                        <div id="loader"></div>
                        <div class="loader-section section-left"></div>
                        <div class="loader-section section-right"></div>
                    </div>
                </ProgressTemplate> 
            </asp:UpdateProgress> 

//我的页面加载程序动画

---

这样，在页面中触发的任何回发都会首先设置页面加载程序的动画，然后在页面加载时停止。

正如JKOU所建议的，我在母版页中使用了一个UpdatePanel，并将我的ContentPlaceHolder包含在UpdatePanel的ContentTemplate中。同时，在UpdateProgress模板中，我附带了我的预加载程序。在没有javascript的情况下，它都可以正常工作

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
               <Triggers> 
                  <asp:AsyncPostBackTrigger ControlID="MainContent" /> 
               </Triggers>                                     
               <ContentTemplate> 
                    <div class="main">       
                        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>                                   
                        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>   
                    </div>
                    <asp:Button ID="hiddenAsyncTrigger" runat="server" Text="AsyncUpdate" style="display:none;" />
               </ContentTemplate>                                  
            </asp:UpdatePanel>    
            <asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1"> 
                <ProgressTemplate > 
                    <div id="loader-wrapper"> //My PageLoader animation
                        <div id="loader"></div>
                        <div class="loader-section section-left"></div>
                        <div class="loader-section section-right"></div>
                    </div>
                </ProgressTemplate> 
            </asp:UpdateProgress> 

//我的页面加载程序动画

---

这样，在页面内触发的任何回发都会首先设置我的页面加载程序的动画，然后在页面加载时停止。

您可以像下面的msdn文章（）一样将updatepanel与updateprogress一起使用，也可以像下面的msdn文章（）一样将updatepanel与updateprogress一起使用