预加载和页面缓存

在Jquery mobile中，当一个链接的页面被设置好预加载后，jquery mobile将在加载完成当前页面后自动在后台进行预加载设置的目标页面。另外使用页面缓存的方法，可以将访问过的page容器都缓存到当前页面文档中，下次访问时，将可以直接从缓存中读取，而无需再重新加载页面。

jQuery Mobile 页面预加载

data-prefetch="true"表示预加载

<div data-role="page">
　　<div data-role="header"><h1>预加载页</h1></div>
　　<div data-role="content">
　　  <p>
　　    <a href="about.htm" data-prefetch="true">点击进入</a>
　　  </p>
　　</div>
　　<div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>
　</div>

调用js的全局方法 $.mobile.loadPage()来预加载指定的目标HTML页面，其效果和data-prefetch="true"一样

jQuery Mobile页面缓存

在page中添加 data-dom-cache="true"属性表示页面缓存

 <div data-role="page" data-dom-cache="true">
　　<div data-role="header"><h1>缓存页面</h1></div>
　　<div data-role="content">
　　     <p>这是一个被缓存的页面</p>
　　</div>
　　<div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>
　</div>

  $.mobile.page.prototype.options.domCache = true也可以表示该页面缓存

<script type="text/javascript">
        $(function() {
            $.mobile.page.prototype.options.domCache = true;
        });
    </script>