Jquery加载动画不生效且控制台无报错，求排查建议

核心问题分析 #

• 同步AJAX阻塞UI渲染
  代码中设置了async: false，这会让浏览器在AJAX请求执行期间完全阻塞UI线程，导致$('#imgLoader').show()的DOM更新无法及时渲染，用户根本看不到加载动画。同步AJAX是强烈不推荐的，现代浏览器对其限制也越来越严格。

• 加载动画显示时机错误
  当前代码在AJAX请求成功后才调用$('#imgLoader').show()，此时请求已完成，加载动画失去了意义。应该在发起AJAX请求之前就显示loader。

• 加载动画隐藏逻辑不严谨
  success分支里多次调用hide()，error分支未正确隐藏loader，会导致请求出错时loader一直停留在页面上。

• CSS样式缺失定位属性
  loader的img标签仅设置了宽高和z-index，未添加position: fixed/absolute，会导致它无法覆盖整个页面，或位置不在可视区域内，即便显示用户也看不到。

修复后的代码示例 #

JavaScript部分 #

function fnLoadVendorData() {
    var vendorSel = $("#ddlVendorName option:selected").text();
    var strCircle = $("#lblRole").text();

    if (vendorSel != "--Select Vendor--" && typeof (vendorSel) != 'undefined') {
        // 发起请求前显示加载动画
        $('#imgLoader').show();
        
        $.ajax({
            type: "POST",
            url: "Ipfee.aspx/GetVendorData",
            data: JSON.stringify({ "vendorName": vendorSel, "strCircle": strCircle }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true, // 改为异步，jQuery默认值，可省略
            success: function (response) {                
                if (response.d != "NoDataFound") {
                    var getDatalist = JSON.parse(response.d);                    
                    Create_vendorDataTable(getDatalist);
                } else {
                    jAlert("Data not available !!", "Information");
                }
            },
            error: function (response, textStatus, errorThrown) {
                jAlert(textStatus, "Information");
            },
            complete: function() {
                // 请求完成（成功/失败）后统一隐藏加载动画
                $('#imgLoader').hide();
            }
        });
    }
}

HTML/CSS部分 #

给loader添加定位样式，确保覆盖全屏：

<!-- 新增定位属性，确保加载动画覆盖整个页面 -->
<img src="Images/ipload.gif" id="imgLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(255,255,255,0.8);" />

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <select name="ddlVendorName" id="ddlVendorName" class="form-control">
                <option value="--Select Vendor--">--Select Vendor--</option>
                <option value="1032">IPFEE_INDUS</option>
                <option value="1028">IPFEE_TVIPL</option>
                <option value="1033">IPFEE_ASCEND</option>
                <option value="1029">IPFEE_BIL</option>
                <option value="1031">IPFEE_GTL</option>
            </select>
            <label>Vendor Name</label>
        </div>
    </div>
    <div class="col-md-3 filterButton">
        <div class="form-group">
            <button type="button" class="btn btn-danger button" id="btnFilterClick"><i class="fa fa-filter" aria-hidden="true"></i>Filter</button>
        </div>
    </div>
</div>

额外注意事项 #

• 检查Images/ipload.gif路径是否正确，可通过浏览器控制台Network标签确认图片是否加载成功。
• 如果Create_vendorDataTable函数执行耗时较长，可考虑在该函数执行完成后再隐藏loader，避免表格还在渲染时loader就消失。

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