Pre-render JQM pages in the background - jquery-mobile

Question

I have a mobile web app built with jQuery Mobile. It is using a multi-page template, with most of the content being created dynamically with javascript. The first time the app is loaded it shows a splash screen and then sends the user to an "index" page. From there the user can navigate to different parts of the app via # links. Each page's content is created dynamically with javascript and then inserted into the DOM on the "pageshow" event.
This works very well with one little problem that I haven't been able to solve. The first time a page is loaded it takes several seconds for the content to be generated and inserted into the DOM. Subsequent loads are fine since the previously rendered content is already in the DOM and is only replaced if there is new data. What I want to do is pre-render each page's DOM so that there is no noticeable delay when a page is loaded for the first time. I can achieve this by calling $.mobile.changePage() on each page. The problem is that I want this to be done in the background without the pages or any page transitions being shown to the user. Is there any way to do this?
P.S.: Worst-case scenario, I'd just keep the splash screen on top of everything while the pages are pre-rendered, but I can't even do this since JQM does the transition and changes the page whenever I call $.mobile.changePage().

Answer 1

All you have to do is use the $.mobile.loadPage. In the example below I show how to initialize a single page by hash URL upon the showing of #one. You could list out all of them if you wanted or create a fancy script to find all the [data-role] elements that do not have a class of ui-page, grab it's ID, and call a load on in the same way I have here.
$("#one").live("pageshow",function(){
$.mobile.loadPage("#two");
});
You can see the example in action on this jsfiddle..

Answer 2

I stumbled upon your question since I was looking into somewhat the same issue. What I ended up with is a _preloadPages() function in my project basically instantiating the page widgets which normally are done internally. Since this is not documented please keep in mind this can break anytime when upgrading JQM.
To control which pages to preload and which not I've introduced a class 'preload' which I place on the page containers I want to preload. This _preloadPages() function I call during splash screen and to not stress the initialization of my app to much the preloading is done in a 300ms interval. Still playing with these numbers though.
function _preloadPages()
{
// Execute the page() widget call on all pages that haven't yet been initialized, we do this
// to prevent a slight delay when initially loading a page
//
var $pages = $( "[data-role='page'].preload:not(.ui-page)" )
, index = 0
, pageCount = $pages.length
;
var preloadTimer = setInterval( function()
{
var page = $pages[ index ]
, $page = $( page )
;
$page.page();
index++;
if ( index === pageCount )
{
clearTimeout( preloadTimer );
}
}, 300 );
}