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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-26

浏览次数：次

返回列表

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

当使用jquery ajax进行数据加载时，加载动画（如gif图片）可能无法正常显示，即使控制台没有错误。这通常是由于ajax请求被设置为同步（`async: false`）导致的。本文将解释同步与异步请求的区别，并指导如何通过将`async`参数设置为`true`来确保加载动画的正确显示，从而提升用户体验。

在现代Web应用开发中，通过AJAX（Asynchronous J*aScript and XML）技术实现页面无刷新数据交互已成为标准实践。为了提升用户体验，我们通常会在数据加载过程中显示一个加载动画（如GIF图片或CSS动画），以告知用户操作正在进行。然而，有时开发者会遇到一个令人困惑的问题：加载动画的显示逻辑看似正确，但在AJAX请求期间却无法正常显示，控制台也没有任何错误报告。本文将深入探讨这一现象背后的原因，并提供一个简洁有效的解决方案。

理解AJAX请求的同步与异步模式

jQuery的$.ajax()方法提供了一个async参数，用于控制请求的执行模式。理解这两种模式对于解决加载动画不显示的问题至关重要。

异步模式 (async: true，默认值)
- 当async设置为true时，J*aScript代码会立即继续执行，而不会等待AJAX请求完成。请求在后台进行，当服务器响应时，success或error回调函数才会被触发。
- 这是推荐的模式，因为它不会阻塞浏览器的主线程，用户界面（UI）保持响应，动画可以正常渲染。
- 加载动画在这种模式下能够正常显示，因为它在AJAX请求发出后，但在数据返回前，有机会被浏览器渲染出来。
同步模式 (async: false)
- 当async设置为false时，J*aScript代码会暂停执行，直到AJAX请求完成并收到服务器响应。这意味着浏览器的主线程被完全阻塞。
- 在这种模式下，用户界面会冻结，无法响应任何用户操作，也无法渲染任何DOM更新或动画。
- 如果加载动画的显示逻辑在AJAX请求之前被触发，由于浏览器主线程被阻塞，加载动画的渲染更新请求会被排队，直到同步AJAX请求完成。一旦请求完成，加载动画可能立即被隐藏，或者由于UI阻塞而从未被用户看到。

问题根源：同步AJAX请求阻塞UI渲染

加载动画不显示的核心原因在于将AJAX请求设置为了同步模式 (async: false)。当J*aScript执行到同步AJAX请求时，它会暂停所有后续代码的执行，包括浏览器对DOM更新和动画渲染的调度。即使你在AJAX请求之前调用了$('#imgLoader').show()来显示加载动画，这个显示操作也无法立即被浏览器渲染出来，因为它被同步请求阻塞了。当请求完成后，加载动画可能已经被$('#imgLoader').hide()隐藏，或者由于阻塞时间过短而根本未被用户感知。

解决方案：启用异步AJAX请求

解决此问题的最直接方法是将AJAX请求的async参数设置为true。由于true是$.ajax()的默认值，通常情况下只需移除async: false这一行即可。如果需要明确指定，则将其设置为true。

小爱开放平台

小米旗下小爱开放平台

291 查看详情小爱开放平台

以下是修改后的代码示例：

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 *ailable !!", "Information");
                }
            },
            error: function (response, textStatus, errorThrown) {
                jAlert("数据加载失败: " + textStatus, "错误信息");
            },
            // 2. 无论请求成功或失败，都在complete回调中隐藏加载动画
            complete: function() {
                $('#imgLoader').hide();
            }
        });
    }
}

配套的HTML结构（加载动画部分）：

@@##@@

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

注意事项：

加载动画的显示与隐藏时机： 务必在AJAX请求发送之前显示加载动画 ($('#imgLoader').show();)，并在请求完成后（无论成功或失败）隐藏它。complete回调函数是处理隐藏逻辑的最佳位置，因为它总是在success或error回调之后执行。
避免使用同步AJAX： 在Web开发中，几乎所有情况下都应避免使用同步AJAX请求。它会导致糟糕的用户体验，并可能在现代浏览器中触发警告甚至被弃用。
错误处理： 确保在error回调中也进行适当的用户提示和UI清理，以防网络问题或服务器错误。
UI阻塞的替代方案： 如果确实需要等待一个操作完成才能进行下一步，可以考虑使用Promise或async/await语法来管理异步流程，同时保持UI的响应性。

总结

当jQuery加载动画在AJAX请求期间不显示时，首先应检查你的$.ajax()配置中是否意外地将async参数设置为false。同步AJAX请求会阻塞浏览器的主线程，阻止UI更新和动画渲染。通过将async参数设置为true（或直接省略它，因为true是默认值），你可以确保AJAX请求以异步方式执行，从而允许加载动画正常显示，显著提升用户体验。始终优先使用异步AJAX，以构建响应迅速、用户友好的Web应用程序。