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

时间:2011-10-03 16:53:39

标签: jquery html ajax

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

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

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

3 个答案:

答案 0 :(得分:7)

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');

干杯。

答案 1 :(得分:2)

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

答案 2 :(得分:1)

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