为什么你的jQuery加载动画不显示？深入理解AJAX异步调用

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

    if (vendorSel !== "--Select Vendor--" && typeof (vendorSel) !== 'undefined') {
        // 1. 在AJAX请求发送前显示加载动画
        $('#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，或直接移除此行（因为true是默认值）
            async: true, 
            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, "错误信息");
            },
            // 2. 无论请求成功或失败，都在complete回调中隐藏加载动画
            complete: function() {
                $('#imgLoader').hide();
            }
        });
    }
}

<img src="Images/ipload.gif" id="imgLoader" 
     style="display: none; width: 80px; height: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;" 
     alt="加载中..." />

<!-- 其他页面内容，如选择框和按钮 -->
<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>
                <!-- ... 其他选项 ... -->
            </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>