Jquery Mobile插件的使用-页面的预加载和缓存

通常，把不同的page存储在多个html文档是要比用一个大的保存多个page容器的文档要好。这样每个页面的dom会少一些。

     当使用单一page的文档时，你可以把page预加载到dom中，这样用户在访问时可以立即打开。要预加载一个页面，给指向这个页面的链接添加 data-prefetch属性。jQueryMobile会在加载完当前页面之后在后台自动加载目标页面，pagecreate事件会被触发。例如：

<a href="prefetchThisPage.html" data-prefetch> ... a>

     你可以预加载随意多个页面，只需要将要预加载的链接加上data-prefetch属性。或者你，可以在js里调用$.mobile.loadPage()方法来设置预加载。

$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

     预加载页面的另一个好处就是用户在预加载页面的时候不会看到ajax加载信息。ajax加载信息只会在框架还没有完成预加载那个页面的情况下出现。

     预加载页面自然会有http请求并且占带宽，所以建议只在接下来很可能会被访问到的页面使用这个特性。比如说图片相册，你可以预加载“上一张”和“下一张”图片这样用户就可以在图片间快速跳转。

DOM容量管理

     为了使页面转场动画生效，转场的来自和到达页面都需要在DOM中。但是把原有的页面存在DOM中会很大量消耗浏览器的内存占用，这可能会导致一些手机的浏览器变慢甚至崩溃。

     所以jqm框架制定了一个简单的机制来保持dom的整洁。当通过AJAX加载了一个页面之后。jqm就会把这个页面标记为 “需要在导航到别的页面后将这个页面从DOM中移除”。当你再次访问已经移除的页面，浏览器可以从缓存中找回这个html文件。如果没有，那 就要从服务器再读取（比如说嵌套的列表，jqm会在你导航到不是属于列表的页面后从dom移除所有列表的页面）。

     包含多个page的文档不会应用这个特性-jqm只会移除通过ajax加载的页面。

在dom中缓存page

     如果想要的话，你可以使jQuery Mobile在dom中保存之前访问过的页面而不是移除他们。这样用户在回到这个页面的时候就可以迅速加载。

     要让所有曾经访问过的pages都缓存进DOM，设置 domcache选项为 true,

 

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

     或者你可以缓存特定的某个页面，给page容器添加如下属性。

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

     或者通过程序来控制:

pageContainerElement.page({ domCache: true });

DOM缓存的缺点是DOM可能会变得很大，某些设备上 会导致变慢或者内存问题。如果你开启了dom缓存， 请一定要管理好DOM并且把你的网站在真机上测试好 。