Question

我的网站上有三页。

第1页：用户输入数据库搜索条件的简单页面

第2页：HTML5 Adobe Edge动画页面

第3页：搜索结果页

第1页加载非常快。第2页和第3页加载缓慢（每个约3秒）。

我想在用户将搜索条件输入page 2时加载Page 1。一旦用户按下page 1上的输入，我希望page 2立即显示。当page 2显示（动画）时，我想加载page 3。 page 3加载后但不是before 5 seconds我希望加载page 3。

大家的优秀答案：好的。这可能是最好的：评论欢迎!!!!

<script>
$(document).on('pageinit', '#first',  function(){

      $('#search').click(function(){ // When user submits form
          $.ajax({ // Call HTML for page 2 (adobe edge animation)
            url: "mypage2.html",
            success: function(html){ //When receiving data :
              $('#second').html(html); //puts data into second div
                $('#first').hide(); //hides the first one
                $('#second').show(); //shows the second one
                setTimeout(showThird,5000); //pretending there's a loading, only for demo purposes
            }
          })
      });

      $.ajax({ // Call HTML for page 3 (adobe edge animation)
        url: "mypage3.html",
        success: function(html){ //When receiving data :
          $('#third').html(html); //puts data into third div
            $('#third').hide(); //hides the third one
        }
      })

      function showThird(){ // hides second div, show third div.
          $('#second').hide();
          $('#third').show();
      }

});
</script>
</head>

<body>
<div id="first">
     <input type="button" id="search">
</div>
<div id="second">
</div>
<div id="third">
</div>
</body>
</html>

我真的可以帮助找出最好的方法来做到这一点。我已经在使用jQuery和jQuery Mobile了。

Answer 1

HTML和呈现它的浏览器本身并不像这样。您无法按照建议将页面排入加载缓冲区。 HTML以同步方式执行命令，即：当调用页面时，旧页面被丢弃并且新页面开始加载。没有办法改变这个事实......然而，有一些技巧可以让你产生想要效果的错觉。

正如另一个答案中所提到的，AJAX（Asynchronous Javascript＆amp; XML）是当今几乎每个站点/应用程序都使用的一种技术，它允许您通过异步调用将内容提取到预先存在的页面中。 jQuery使AJAX调用变得非常简单，所以我会让你查找必要的代码。

您可能需要考虑在加载表单页面时加载动画页面（我假设它是一个加载动画）。您可以直接隐藏动画，而不是另外调用拉动画页面...并在提交表单时显示动画...然后在将新信息拉到页面时再次隐藏它！

Answer 2

您应该使用ajax加载页面。

例如，你将有一个div包含第1页。当第1页加载时，第2页也会异步加载，其内容被加载到另一个div中，隐藏。

当用户提交搜索时，隐藏div 1，并显示div 2。

同时，第3页通过ajax异步调用，加载到隐藏的div 3中。

加载时，div 2被隐藏，并显示div 3.

这是ajax部分：

$.ajax({ 
      url: "page2.html",
      success: function(html){ //When receiving data :
        $('#second').html(html); //puts data into second div
          $('#first').hide(); //hides the first one
          $('#second').show(); //shows the second one
      }
});

工作演示JSFiddle： http://jsfiddle.net/38DPJ/

Answer 3

我猜您可以使用AJAX来电。尝试这样的事情：

$.ajax({
  url: "page2.html",
  cache: true,
  success: function(html){

  }
})

对于page3，您可以尝试

$.ajax({
      url: "page3.html",
      cache: true,
      success: function(html){

setTimeout(function(){window.location.href = "page3.html";},5000);

      }
    })

如何在第2页加载时显示第1页的Div，并在setTimeout后显示第2页

3 个答案: