jquery mobile - Delaying load of page contents until menu item clicked in a multi-page template -

i'm not sure understand what's possible multi-page templates in jqm need bit of help. i'm using version 1.4.5.

let's app has 2 pages (page , b) generated multi-page template. takes server several seconds generate each page because require many database calls , data processing. currently, multi-page template generated single script on server, index.pl.

both pages accessed user through navbar. page first page in template it's visible user first.

to speed app, want html page b generated , fetched server after user taps navbar menu item page b.

after page b loads, user should able switch between pages instantly since content both pages loaded dom.

what proper way of accomplishing desired result?

do tie navbar tap on page b ajax call , inject server response page b? seems kludgy.

i'm thinking i'm missing fundamental jqm i'm not sure what. can help?

server-side script pseudocode:

<!-- page --> output <div data-role="page" id="page_a">  output <div data-role="navbar">   output <ul><li><a href="#page_a">page a</a></li><a href="#page_b">page b</a><li></ul> output </div>  output <div role="main" class="ui-content">           generate_html_page_a(); output </div> output </div>  <!-- page b -->     output <div data-role="page" id="page_b">  output <div data-role="navbar">   output <ul><li><a href="#page_a">page a</a></li><a href="#page_b">page b</a><li></ul> output </div>  output <div role="main" class="ui-content">           generate_html_page_b(); output </div> output </div> 

for architecture best approach single page template can use pagecontainer api load page programmatically.

$(":mobile-pagecontainer").pagecontainer("load", "about.html", { role: "dialog" }); 

check jqm docs more information.