如何在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完成/成功,Do

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

干杯.