If you're using a single page template, but would prefer to lazy load in a few key pages in the background to avoid seeing the Ajax loader, we recommend using the pre-fetch feature instead of moving to a multi-page template. To pre-fetch a page, simply add the data-prefetch attribute to any link and jQuery Mobile will lazy load this page in the background after the primary page has loaded. Here's an example:
<a href="foo/bar/baz" data-prefetch>link text</a>
Technically here's how it works: after pagecreate, jQuery Mobile will automatically find all links in a page that have an attribute of data-prefetch and automatically load the pages so they're available as soon as the user clicks on the link. The Ajax loader won't appear unless the framework hasn't loaded the page by the time the link was clicked.
Pre-fetching links will naturally cause additional HTTP requests and increased bandwidth that may never be used, so it's important to use this feature only in situations where it's highly likely that a page will be visited.
<a href="foo/bar/baz" data-prefetch>link text</a>Pages can also be pre-fetched programmatically by calling $.mobile.loadpage( url )
Since animated page transitions require that the page you're on and the one you're transitioning to are both in the DOM, we add pages to the DOM as you navigate around. Before Beta 2, those pages would continue to stay in the DOM until a full page refresh occured so there was always a concern that we could hit a memory ceiling on some devices and cause the browser to slow down or even crash.
The jQuery Mobile framework has a simple mechanism to keep the DOM tidy: whenever a page is loaded in via Ajax, it is flagged for removal from the DOM once you navigate away to another page (technically, on pagehide). If you return to a deleted page, the browser may be able to retrieve the file from it's cache, or it will re-request it fro the sever if needed. In the case of nested lists, we remove all the pages that make up the nested list once you navigate to a page that's not part of the list. Pages that are included in a multi-page setup won't be affected by this feature at all - only pages brought in by Ajax are managed this way by jQuery Mobile.
A page option called domCache controls whether to leave pages in the DOM as a way to cache them (the way things used to work) or keep the DOM clean and remove hidden pages (the new way). By default, domCache is set to false to keep the DOM size actively managed. If you set this to true, you need to take care to manage the DOM yourself and test thoroughly on a range of devices.
Set the domCache option globally like this:
$.mobile.page.prototype.options.domCache = true;To set the domCache option on an individual pages, you can add the data-dom-cache="true" attribute to the page container to tell teh framework to not remove the page when it's hidden:
<a href="foo/bar/baz" data-dom-cache="true">link text</a>
Alternatively, pages can be cached in the DOM programmatically like this:
elem.page({ domCache: true });