我的网站上有三个页面。
第 1 页:用户输入数据库搜索条件的简单页面
第 2 页:HTML5 Adobe Edge 动画页面
第3页:搜索结果页
第 1 页加载速度非常快。第 2 页和第 3 页加载缓慢(每页约 3 秒)。
当用户在 Page 1 中输入他们的搜索条件时，我想加载 page 2。一旦用户在 page 1 上按下 enter，我希望 page 2 立即显示。当 page 2 正在显示(动画)时，我想加载 page 3。 第 3 页 加载后但不是 5 秒之前 我想要加载 第 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。
最佳答案
HTML 和呈现它的浏览器并非天生如此。您不能按照您的建议将页面排队到加载缓冲区中。 HTML 以同步方式执行命令，即:当一个页面被调用时，旧页面被丢弃，新页面开始加载。没有办法改变这个事实……但是，有一些技巧可以让您获得您正在寻找的效果的错觉。
正如在另一个答案中提到的，AJAX(异步 Javascript 和 XML)是当今几乎每个站点/应用程序都使用的一种技术，它允许您通过异步调用将内容提取到预先存在的页面中。 jQuery 使 AJAX 调用变得相当简单，因此我会让您查找必要的代码。
您可能需要考虑在加载表单页面时加载动画页面(我假设它是加载动画)。无需额外调用以拉取动画页面，您只需先隐藏动画...并在提交表单时显示它...然后在将新信息拉到页面上时再次隐藏它!
关于javascript - 如何在第 2 页加载时在第 1 页显示 Div 并在 setTimeout 后显示第 2 页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20973514/