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

Question

我知道执行AJAX调用的巨大优势在于，在某个元素尚未准备好之前，页面的其余部分可以加载并为用户做好准备。但我有一些特殊的业务要求。

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

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

Answer 1

2015年3月更新：我强烈建议不要使用此方法，因为主线程上的同步XMLHttpRequests现已弃用;见http://xhr.spec.whatwg.org/

  

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

---

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

关于页面加载：不要挂钩任何“就绪”事件。只需在加载jQuery库后直接调用：

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

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

在AJAX完成/成功时，执行

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

干杯。

Answer 2

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

Answer 3

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