.load() page and preload all content
<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>
