title: .load() page and preload all content
body: <p>I'm trying to replicate jQuery Mobile's page navigation system wherein you can call a page which is loaded into the dom in a container floated to the right and then animated over and have the following so far: <a href="http://s46264.gridserver.com/dev/dave/pageslider/" rel="nofollow">http://s46264.gridserver.com/dev/dave/pageslider/</a></p>
  
  <p>My problem is that i'd like to preload all page contents before calling the animate statement (see load page 2) How can I do this?</p>
  
  <p>Code so far:</p>
  
  <pre><code>var currPage = "one";
  
          function loadPage(newPage) {
              $("&lt;div id='" + newPage + "' class='page'&gt;&lt;/div&gt;").insertAfter('#'+currPage);
              $('#'+newPage).load('pages/' + newPage + '.php', function() {       
                  $('#page_wrapper').animate({
                      left: '-400px'
                  }, 200, function() {
                      $('#'+currPage).remove();
                      $('#page_wrapper').css('left',0);
                      currPage = newPage;
                  });
              });
          }
  
          $(document).ready(function() {
              $("#page_wrapper").append("&lt;div id='" + currPage + "' class='page'&gt;&lt;/div&gt;");
              $('#'+currPage).load('pages/' + currPage + '.php');
          })
  </code></pre>
  
  <p>Also, i'm quite new so any tips on errors in my approach are well received.</p>
  
  <p>Thanks</p>