How can I show a Div on page 1 while page 2 is loading and display page 2 after setTimeout
Question
I have three pages on my site.
Page 1: A simple page where the user enters the database search criteria
Page 2: An HTML5 Adobe Edge animated page
Page 3: The search results page
Page 1 loads very fast. Pages 2 and 3 load slowly (about 3 seconds each).
I want to load page 2 while the user is entering their search criteria into Page 1 . Once the user presses enter on page 1 , I want page 2 to display immediately. While page 2 is displaying (animating), I want to load page 3 . After page 3 loads BUT not before 5 seconds I want page 3 to load.
Excellent answers from everyone: OK. Here's what might work best: Comments welcome!!!!
<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>
I could really use some help figuring out the best way to do this. I'm already using jQuery and jQuery Mobile.
3 answers
solution1
3 2014-01-07 14:27:16
HTML and the browsers that render it do not inherently behave like this. You cannot queue pages into a loading buffer as you suggest. HTML executes commands in a synchronous fashion, ie: when a page is called, the old page is discarded and the new one begins to load. There is no way to change this fact...there are, however, some tricks to get the illusion of the effect you are looking for.
As mentioned in another answer, AJAX (Asynchronous Javascript & XML) is a technique utilized by almost every site/application today which allows you to pull content into a pre-existing page with an asynchronous call. jQuery makes AJAX calls rather simple so I'll let you look up the code necessary.
You may want to consider loading the animated page (I am assuming it is a loading animation) when the form page is loaded. Rather than making an additional call to pull the animation page, you can simply hide the animation initially...and show it when the form is submitted...then hide it again when the new information is pulled onto the page!
solution2
2 2014-01-07 14:03:58
You should load your pages using ajax.
For example, you would have one div containing page 1. When page 1 loads, page 2 is also loaded asynchronously and its content is loaded into another div, hidden.
When the user submits his search, div 1 is hidden, and div 2 is shown.
At the same time, page 3 is called asynchronously via ajax, loaded in a hidden div 3.
When loaded, div 2 is hidden, and div 3 is shown.
This is the ajax part :
$.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
}
});
Working demo JSFiddle : http://jsfiddle.net/38DPJ/
solution3
1 2014-01-07 14:03:39
I guess you can use an AJAX call. Try something like this:
$.ajax({
url: "page2.html",
cache: true,
success: function(html){
}
})
And for page3 you can try
$.ajax({
url: "page3.html",
cache: true,
success: function(html){
setTimeout(function(){window.location.href = "page3.html";},5000);
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.