本文深入探讨了jquery加载动画在ajax请求中不显示的问题。核心原因是`$.ajax`配置中`async: false`导致ui线程阻塞，阻止了浏览器渲染加载动画。文章将详细解释`async: false`的工作原理及其对用户体验的影响，并提供将`async`设置为`true`的解决方案，同时给出最佳实践，确保加载动画正确显示并优化用户体验。

在Web应用开发中，为耗时操作（如数据加载）提供视觉反馈（如加载动画）是提升用户体验的关键。然而，开发者有时会遇到一个看似矛盾的现象：即使在代码中明确调用了显示加载动画的方法，动画却仍然不显示。这通常与javaScript的执行模型以及AJAX请求的同步/异步特性有关。

理解问题：为何加载动画不显示？

当您在发起AJAX请求前尝试显示一个加载GIF（例如通过$(‘#imgLoader’).show();），但它在请求过程中并未出现，直到数据加载完毕才瞬间闪现或根本不显示，这很可能是因为浏览器的UI线程被阻塞了。

javascript在浏览器中是单线程执行的。这意味着在任何给定时间点，浏览器的主线程只能执行一个任务。这个主线程负责处理JavaScript代码的执行、dom操作、事件处理以及UI的渲染和重绘。当一个耗时操作（如AJAX请求）以同步方式运行时，它会完全占用主线程，阻止其他所有任务的执行，包括UI的更新。

在提供的代码示例中，问题根源在于$.ajax配置中的async: false：

function fnLoadVendorData() {     // ... 其他逻辑 ...     if (vendorSel != "--Select Vendor--" && typeof (vendorSel) != 'undefined') {         $.ajax({             type: "POST",             url: "Ipfee.aspx/GetVendorData",             data: jsON.stringify({ "vendorName": vendorSel, "strCircle": strCircle }),             contentType: "application/json; charset=utf-8",             dataType: "json",             async: false, // <-- 关键问题所在             success: function (response) {                 if (response.d != "NoDataFound") {                     $('#imgLoader').show(); // 此时UI线程已被阻塞，无法立即渲染                     var getDatalist = JSON.parse(response.d);                     Create_vendorDataTable(getDatalist);                     $('#imgLoader').hide();                 } else {                     jAlert("Data not available !!", "Information");                 }                 $('#imgLoader').hide();             },             Error: function (response, textStatus, errorThrown) {                 jAlert(textStatus, "Information");             }         });     } }

即使$(‘#imgLoader’).show();被调用，如果AJAX请求是同步的，浏览器主线程会等待请求完成，期间不会进行任何UI重绘。这意味着即使DOM元素的状态被改变为显示，浏览器也无法在请求完成前将这些改变渲染到屏幕上。用户会感觉页面“卡住”或无响应。

深入探究 async: false 的影响

async参数在$.ajax中用于控制请求的异步行为。

• 当async: true（默认值）时，AJAX请求是异步的。这意味着请求会在后台发送，而JavaScript主线程会继续执行后续代码，不会等待请求的响应。当请求完成后，success或error回调函数才会被触发。这种模式允许浏览器在等待响应期间保持响应，并更新UI。
• 当async: false时，AJAX请求是同步的。这意味着JavaScript主线程会暂停执行，直到AJAX请求完成并收到服务器响应。在此期间，浏览器无法执行任何其他任务，包括UI渲染、事件处理或用户交互。这会导致页面冻结，用户体验极差。

在上述代码中，async: false使得GetVendorData的AJAX调用完全阻塞了浏览器的主线程。即使$(‘#imgLoader’).show();被放置在success回调内部（这本身就不是显示加载动画的最佳时机，因为此时数据已经返回），由于整个AJAX调用是同步的，浏览器在收到响应之前根本没有机会去渲染这个show()操作。

解决方案：启用异步 AJAX

解决此问题的核心在于将AJAX请求设置为异步模式。这是Web开发中的标准实践，也是提供流畅用户体验的基石。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

核心改动：

将async参数从false修改为true，或者直接移除async属性，因为true是$.ajax的默认行为。

function fnLoadVendorData() {     var vendorSel = $("#ddlVendorName option:selected").text();     var strCircle = $("#lblRole").text();      if (vendorSel != "--Select Vendor--" && typeof (vendorSel) != 'undefined') {         // 在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, // <-- 关键修改：设置为异步             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();             }         });     } }

工作原理：

当async设置为true后，$.ajax请求会在后台发起，而主线程不会被阻塞。这意味着：

1. $(‘#imgLoader’).show();可以立即执行，并且浏览器有能力在后台请求进行时渲染这个加载动画。
2. 用户界面保持响应，用户可以继续进行其他操作（尽管通常在加载时会禁用相关控件）。
3. 当请求成功或失败时，相应的回调函数（success或error）会被执行，此时可以隐藏加载动画。

最佳实践与注意事项

1. 加载动画的正确放置时机：

   • 显示时机： 始终在发起AJAX请求之前调用$(‘#imgLoader’).show();。
   • 隐藏时机： 在success回调和error回调中都调用$(‘#imgLoader’).hide();，确保无论请求结果如何，加载动画都能被正确隐藏。更推荐的做法是使用complete回调，它无论请求成功或失败都会执行。

   // 示例代码片段： $('#imgLoader').show(); // 在AJAX请求开始前显示 $.ajax({     // ... 配置 ...     success: function(response) {         // 处理成功数据     },     error: function(xhr, status, error) {         // 处理错误     },     complete: function() {         // 请求完成（无论成功或失败）后隐藏加载动画         $('#imgLoader').hide();     } });

2. 避免使用 async: false：

   • 用户体验： async: false会导致页面冻结，严重损害用户体验。在现代Web开发中，它被认为是一种反模式。
   • 浏览器警告： 大多数现代浏览器（尤其是在主线程上）已经开始发出警告，甚至在某些情况下会阻止同步AJAX请求，以防止页面冻结。
   • 废弃趋势： XMLHttpRequest规范已将同步请求标记为废弃，并建议开发者使用异步方式。

3. 替代方案：处理异步流控制： 如果您的业务逻辑确实需要依赖前一个AJAX请求的结果才能执行下一个操作，请不要使用async: false。而应采用现代JavaScript的异步编程模式：

   • 回调函数： 这是AJAX本身的基础，通过嵌套回调来处理依赖关系（但可能导致回调地狱）。
   • promise： 使用$.ajax返回的Promise对象，通过.then()链式调用来处理异步操作序列。

     $('#imgLoader').show(); $.ajax({ /* ... */ })     .done(function(data) {         // 处理第一个请求的成功         return $.ajax({ /* 第二个请求 */ });     })     .done(function(data2) {         // 处理第二个请求的成功     })     .fail(function(xhr, status, error) {         // 处理任何一个请求的失败     })     .always(function() {         $('#imgLoader').hide();     });
   • async/await： 这是ES2017引入的语法糖，基于Promise，可以使异步代码看起来更像同步代码，提高可读性。

     async function loadDataSequentially() {     $('#imgLoader').show();     try {         let response1 = await $.ajax({ /* 第一个请求 */ });         // 处理 response1         let response2 = await $.ajax({ /* 第二个请求 */ });         // 处理 response2     } catch (error) {         console.error("加载数据失败:", error);     } finally {         $('#imgLoader').hide();     } }

总结

jquery加载动画不显示的问题，通常是由于AJAX请求被错误地设置为同步（async: false）所致。同步AJAX会阻塞浏览器的主线程，导致UI无法更新。解决方案是确保AJAX请求始终以异步方式（async: true或省略async参数）执行，并将加载动画的显示和隐藏逻辑放置在正确的时机（请求前显示，请求完成或失败后隐藏）。遵循这些最佳实践，不仅能解决加载动画不显示的问题，更能显著提升Web应用的响应性和用户体验。