Geek Answers Handbook

How can I show the div on page 1 while page 2 is loading and page 2 is displayed after setTimeout

I have three pages on my site.

Page 1: A simple page where the user enters database search criteria

Page 2: HTML Edge Animated Page HTML5

Page 3: Search Results Page

Page 1 loads really fast. Pages 2 and 3 load slowly (about 3 seconds each).

I want to download page 2while the user enters search criteria in Page 1. As soon as the user clicks, enter Page 1, I want to page 2be displayed immediately. While page 2displayed (animation), I want to download page 3. After page 3loading BUT, but not before 5 seconds, I want to download page 3.

Great answers from everyone: OK. Here, what may work best: Comments are 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 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 use some help to figure out how to do this. I already use jQuery and jQuery Mobile.

+4
source share
3 answers

HTML and the browsers that render it do not inherently behave this way. You cannot put pages in the load buffer as you suggest. HTML executes commands synchronously, i.e. When the page is called, the old page is discarded, and the new one starts loading. This fact cannot be changed ... however, there are some tricks to get the illusion of the effect you are looking for.

, AJAX ( Javascript XML) - , / , . jQuery AJAX- , .

( , ), . , , , ... ... , !

+3

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/

+2

I think you can use a call AJAX. Try something like this:

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

  }
})

And for page3you can try

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

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

      }
    })
+1
source

More articles:


All Articles