ASP.NET母版页中用jQuery全局显示加载GIF动画的问题

我来帮你搞定这个全局加载GIF的问题——要让所有内容页不管是首次加载、AJAX请求还是表单提交这类耗时操作都显示加载动画，关键是把逻辑放在母版页里，同时修正你之前代码里的小问题。下面是一步步的完整方案：

1. 在母版页添加加载GIF的HTML元素 #

首先在母版页的<body>标签内（比如靠近末尾的位置）添加一个用于显示加载动画的容器，默认隐藏：

<!-- 放在母版页的<form>内或者<body>末尾都可以 -->
<div id="loading" style="display:none;">
    <img src="<%= ResolveUrl("~/Images/loading.gif") %>" alt="加载中，请稍候..." />
</div>

注意：用ResolveUrl处理图片路径，避免在不同层级的内容页里路径出错。

2. 添加CSS样式让加载动画居中显示 #

在母版页的<head>里添加样式，让加载动画固定在页面中央，并且遮挡下层内容：

#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* 确保动画在所有元素最上层 */
    background-color: rgba(255, 255, 255, 0.9); /* 半透明白背景，提升可读性 */
    padding: 15px;
    border-radius: 8px;
}
#loading img {
    width: 40px;
    height: 40px;
}

3. 编写全局生效的jQuery代码 #

先确保母版页已经引入了jQuery库（路径根据你的实际项目调整），然后添加自定义脚本：

<!-- 先引入jQuery库 -->
<script src="<%= ResolveUrl("~/Scripts/jquery-3.6.4.min.js") %>"></script>
<script>
$(document).ready(function() {
    // 监听所有jQuery发起的AJAX请求：开始时显示动画，结束时隐藏
    $(document).ajaxStart(function() {
        $("#loading").show();
    }).ajaxStop(function() {
        $("#loading").hide();
    });

    // 处理页面首次加载：页面所有资源（图片、样式等）加载完成后隐藏动画
    $(window).on('load', function() {
        $("#loading").hide();
    });

    // 处理普通表单提交（非AJAX）：提交时显示动画
    $('form').on('submit', function() {
        $("#loading").show();
    });

    // 修正你之前AJAX代码里的问题
    // 原代码的两个错误：一是~/路径在JS里无法解析，二是return false的位置错误
    // 下面是修正后的示例（如果是按钮触发的AJAX）：
    /*
    $('#yourSubmitButton').click(function(e) {
        e.preventDefault(); // 阻止按钮的默认提交行为
        var dataString = "your=data&parameters=here";
        
        $.ajax({ 
            type: "POST", 
            url: '<%= ResolveUrl("~/Jobs/ExportJobEntry.aspx") %>', // 用ResolveUrl处理路径
            data: dataString, 
            success: function() { 
                $('#form').html("<div id='msg'></div>"); 
                $('#msg').html("Thank you for your email. I will respond within 24 hours. Please reload the page to send another email.") 
            }, 
            error: function() { 
                $('#form').html("<div id='msg'></div>"); 
                $('#msg').html("Please accept my apologies. I've been unable to send your email. Reload the page to try again.") 
            } 
        }); 
        return false; // 放在点击事件处理函数里，而不是AJAX参数中
    });
    */
});
</script>

关键注意事项 #

• 全局AJAX监听：ajaxStart和ajaxStop是jQuery的全局事件，只要页面上有任何jQuery发起的AJAX请求，就会自动触发，完美覆盖所有内容页的AJAX操作。
• 首次加载处理：如果要在页面刚打开时就显示加载动画，可以把#loading的默认样式改成display:block;，然后等window.load完成后隐藏。
• 路径问题：所有ASP.NET的相对路径（比如~/开头的）都要用ResolveUrl或者ResolveClientUrl处理，否则在子目录的内容页里会找不到资源。
• jQuery引入顺序：一定要先引入jQuery库，再写自定义脚本，否则会报错$ is not defined。

内容的提问来源于stack exchange，提问作者Rajkumar