Use of the Jquery mobile plugin-pre-loading and caching of pages

In general, it is better to store different page in multiple HTML documents than to use a large document that holds multiple page containers.      This will make the DOM of each page less. When using a single page document, you can pre-load the page into the DOM so that users can open it immediately when they access it. To pre-load a page, add a link to the page Data-prefetchProperty. Jquerymobile will automatically load the target page in the background after loading the current page, and the Pagecreate event will be triggered. For example:

<a href= "prefetchthispage.html" data-prefetch> ... </a>

You can preload as many pages as you want, just add the data-prefetch property to the link you want to preload. Or you can call the $.mobile.loadpage () method in JS to set the preload.

$.mobile.loadpage (Pageurl, {showloadmsg:false}); Another benefit of preloading a page is that the user does not see the Ajax loading information when the page is preloaded.      The Ajax loading information will only appear if the framework has not finished preloading that page. Preloaded pages will naturally have HTTP requests and bandwidth, so it is recommended that you use this feature only for pages that are likely to be accessed next. For example, photo albums, you can preload "previous" and "next" pictures so that users can quickly jump between pictures. DOM Capacity ManagementIn order for the page transition animation to take effect, the transitions from and to the page need to be in the DOM.      However, the existence of the original page in the DOM will be a lot of memory consumption of the browser, which may cause some phone browser slowed or even crash. So the JQM framework developed a simple mechanism to keep the DOM neat. After a page has been loaded via Ajax. JQM will mark this page as "you need to remove this page from the DOM after navigating to another page." When you revisit a page that has already been removed, the browser can retrieve the HTML file from the cache.      If not, then read from the server (for example, a nested list, JQM will remove all the list pages from the DOM after you navigate to a page that is not part of the list). Documents that contain multiple pages do not apply this feature-JQM only the page that is loaded by Ajax is removed. caching the page in the DOMIf you want, you can have jquery mobile Save the pages you've visited in the DOM instead of removing them.      This allows users to quickly load when they return to this page. To have all pages that have ever been visited cached in the DOM, set Domcacheoption is true,

$.mobile.page.prototype.options.domcache = true;

Or you can cache a particular page and add the following properties to the page container.

<div data-role= "page" id= "Cacheme" data-dom-cache= "true" >

or through a program to control:

Pagecontainerelement.page ({domcache:true});

The disadvantage of DOM caching is that the DOM can become very large, causing slow or memory problems on some devices. If you turn on DOM caching, be sure to manage the DOM and test your site on the real machine.