Jquery Mobile学习教程之预加载与页面缓存-蒲公英云

预加载与页面缓存

通常情况下，移动终端设备的系统配置要低于PC终端，因此，在开发移动应用程序时，更要注意页面在移动终端浏览器中加载时的速度。如果速度过慢，用户的体验将会大打折扣。为了加快页面移动终端访问的速度，在jQuery Mobile 中，使用预加载与页面缓存都是十分有效的方法。当一个被链接的页面设置好预加载后，jQuery Mobile将在加载完成当前页面后自动在后台进行预加载设置的目标页面；另外，使用页面缓存的方法，可以将访问过的”page”容器都缓存到当前的页面文档中，下次再访问时，将可以直接从缓存中读取，而无需再重新加载页面。

预加载

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

实例 jQuery Mobile页面预加载

1. 功能说明

　　在新建的HTML 页面中添加一个元素，将该元素的”href”属性值设置为”about.htm”,并将”data-prefetch”属性值设置为”true”,表示预加载元素的链接页面。

　　2. 实现代码

　　新建一个HTML页面href.htm,加入代码如代码清单所示。

　<!DOCTYPE html>
　　<html>
　　<head>
　　<title>jQuery Mobile 页面预加载</title>
　　<meta name="viewport" content="width=device-width,
　　initial-scale=1" />
　　<link  href="Css/jquery.mobile-1.0.1.min.css"
　　rel="Stylesheet" type="text/css" />
　　<script src="Js/jquery-1.6.4.js"
　　type="text/javascript"></script>
　　<script src="Js/jquery.mobile-1.0.1.js"
　　type="text/javascript"></script>
　　</head>
　　<body>
　　<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>
　　</body>
　　</html>

页面效果

源码分析

　　从图2-5可以很清楚地看到，元素链接的目标页面”about.htm”中，”page”容器的内容已经通过预加载的方式注入当前文档中。

　　在jQuery Mobile中，想要实现页面的预加载，方法有两种，如下所示：

　　在需要链接页面的元素中添加”data-prefetch”属性，设置属性值为”true”或不设置属性值均可；设置完该属性值后，jQuery Mobile将在加载完成当前页面以后，自动加载该链接元素所指的目标页面，即”href”属性的值。

　　调用JavaScript代码中的全局性方法$.mobile.loadPage（）来预加载指定的目标HTML页面，其最终的效果与设置元素的”data-prefetch”属性一样，详细的实现过程将在2.3.3节进行介绍。

　　说明无论是添加元素的”data-prefetch”属性，还是使用全局性方法$.mobile.loadPage（）在实现页面的预加载功能时，都允许同时加载多个页面。但在进行预加载的过程中需要加大页面HTTP的访问请求，这可能会延缓页面访问的速度，因此，该功能需要有选择性地使用。

页面缓存

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

实例 jQuery Mobile页面缓存

1. 功能说明

　　新建一个HTML页面，在内容区域中显示”这是一个被缓存的页面”文字。将”page”容器的”data-dom-cache”属性设置为”true”,可以将该页面的内容注入文档的缓存中。

2. 实现代码

　　新建一个HTML页面href.htm,加入代码如代码清单所示。

　<!DOCTYPE html>
　　<html>
　　<head>
　　<title>jQuery Mobile页面缓存</title>
　　<meta name="viewport" content="width=device-width,
　　initial-scale=1" />
　　<link  href="Css/jquery.mobile-1.0.1.min.css"
　　rel="Stylesheet" type="text/css" />
　　<script src="Js/jquery-1.6.4.js"
　　type="text/javascript"></script>
　　<script src="Js/jquery.mobile-1.0.1.js"
　　type="text/javascript"></script>
　　<script type="text/javascript">
　　$（function（） {
　　$.mobile.page.prototype.options.domCache = true;
　　}）
　　</script>
　　</head>
　　<body>
　　<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>
　　</body>
　　</html>