如何在 AJAX 调用完成之前保持页面呈现？答案

【问题标题】：How to hold page render until an AJAX call completes?如何在 AJAX 调用完成之前保持页面呈现？
【发布时间】：2015-03-04 21:07:16
【问题描述】：

我知道进行 AJAX 调用的巨大优势是页面的其余部分可以在某个元素完全准备好之前加载并为用户准备好。但我有一点特殊的业务需求。

首先，由于架构的原因，我必须使用 AJAX。其次，要求是我不能创建某个部分的延迟加载的外观。因此，我需要在返回 jQuery AJAX 调用之前不呈现页面。

到目前为止，我唯一的尝试是简单地将 AJAX 调用从 jQuery document.ready 函数中取出，认为它会立即触发并且可能会延迟页面。这不起作用。

【问题讨论】：

由于是异步的，我认为 JavaScript 不会以这种方式影响页面的呈现。
默认情况下 jquery 的 .ajax 方法是异步的。你为什么不把它设置为同步。这应该会延迟页面。

标签： jquery html ajax

【解决方案1】：

2015 年 3 月更新：我强烈建议不要使用这种方法，因为现在不推荐使用主线程上的同步 XMLHttpRequest；见http://xhr.spec.whatwg.org/

worker 之外的同步 XMLHttpRequest 正在从 Web 平台中移除，因为它会对最终用户的体验产生不利影响。（这是一个需要很多年的漫长过程。）当 JavaScript 全局环境是文档环境时，开发人员不得为 async 参数传递 false。强烈建议用户代理在开发者工具中警告此类使用，并尝试在发生 InvalidAccessError 异常时抛出异常。

jQuery.ajax() 带有 async 参数。当设置为false 时，您的 AJAX 请求将变为同步/阻塞。

至于页面加载：不要挂钩任何“就绪”事件。加载jQuery库后直接调用即可：

$('body').css('display', 'none');

然后运行您的（现在是同步的）AJAX 请求。

在 AJAX 完成/成功时，执行

$('body').css('display', 'block');

干杯。

【讨论】：

身体隐藏技巧也应该在成功和失败处理程序中异步工作。确保设置合理的超时时间，并在失败时显示一些合理的内容。

【解决方案2】：

您可以将包装元素的显示设置为无，然后在 ajax 请求返回后将其更改为阻塞。

【讨论】：

【解决方案3】：

尝试在您的 ajax 调用中使用 async:false。

【讨论】：