使jQuery/AAJAX在页面加载时立即执行


Make jQuery/AJAX perform instantly on page load

是否可以从AJAX即时加载内容?

例如,在加载时,我使用$.getJSON:

$(function(){
  $.getJSON('posts.php',function(data){
    data.posts.forEach(function(post){
       // load info, append divs
    })
  })
 })

然而,在页面加载时divs没有被附加的情况下,会有一个轻微的延迟(可能是1秒(。只有当您使用PHP on-load时,这才可能实现吗?

Ajax调用的速度就是Ajax调用的速率。这是一次到服务器的往返,所以一旦你在服务器上以最快的速度完成了往返,你就无能为力了,因为剩下的只是服务器和客户端浏览器之间的传输速度。因此,总会有一些延迟。

作为一项工作,你可以做一些事情:

  1. 您可以在<head>标记中立即发送ajax调用,而不是等待页面加载。当结果返回时,您只需存储结果。然后,当页面加载完成时,您立即插入结果。

  2. 您可以隐藏您的主要内容,运行ajax调用,插入ajax结果,然后显示您的内容。这将使所有内容同时"出现"在屏幕上。

第一个选项看起来是这样的:

<head>
  <script src="jquery.min.js"></script>
  <script>
  $.when($.getJSON('posts.php'), jQuery.ready).then(function(result) {
      // result[0] is the result from the getJSON call
      // and the DOM is ready so you can insert the content here
  });
  </script>
</head>

这会在页面开始加载时立即启动ajax调用,以便尽快启动。然后,当ajax调用完成并且DOM准备就绪时,就可以插入内容了。

这更像是一个用户体验问题。你能做的就是让它"被感知"为即时的。例如,它有Ajax加载程序吗?准备好后可以淡入内容吗?有很多技巧可以让它变得"即时"。我同意,你不能随便在页面上弹出一些东西。这会让人害怕。