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

Question

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

$(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>

Answer 1

按照 JKOU 的建议，我在 MasterPage 中使用了 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> 

这样，页面内触发的任何回发都会首先为我的页面加载器提供动画，然后在页面加载时停止。