jquery mobile 入门5 (预加载与缓存页面)

jquery mobile   入门5 (预加载与缓存页面)

五.  预加载与缓存页面

1. 预加载页面

      在开发移动应用程序时， 对需要链接的页面进行预加载是十分必要的。因为当一个链接的页面设置成预加载方式时，在当前页面加载完成后，目标页面也被自动加载到当前文档中，用户单击就可以马上打开，大大加快了页面访问的速度。

预加载方式1：

通过给需要预加载的外联标签添加  data-prefetch="true"  属性。

实例代码：

........

<div  data-role="main">

<!--当该页面加载完成后，将会自动预加载 设置了属性 “data-prefetch=true”  的标签指定的外部页面到该文档中-->

<a href="新页面.html"  data-prefetch="true">点击我讲打开在本页面中已已预加载的 “新页面.html” 内容</a>

</div>

预加载方式2：

通过调用javascript 代码中的全局方法 $.mobile.loadPage()来预加载指定的目标HTML页面。 其最终效果与预加载方式1 一样。

实例:

$(document).on("pagecreate",function(){

$.mobile.loadPage("新页面.html");

})

2. 页面缓存

在jQuery mobile 中，可以通过页面缓存的方式将访问过的历史内容写入页面文档的缓存中；当用户重新访问时，不需要重新加载，只要充缓存中读取就可以。

设置页面缓存方式1：

通过给 “page”  容器的 “data-dom-cache” 属性，将对应容器中的全部内容写入缓存中。

代码实例

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

............................

</div>

设置页面缓存方式2：

通过  javascript  设置 代码： $.mobile.page.prototype.options.domCache = ture  . 可以将当前文档写入缓存。

注： 使用页面缓存的功能将会使DOM内容变大，可能导致某些浏览器打开的速度变得缓慢。因此，一旦选择了开启缓存功能，就要管理好缓存的内容，并做到及时清理。