JQuery Mobile入门——预加载页面

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

2、设置链接页面预加载,在<a>标签中添加data-prefetch属性,并将属性值设为true。在JQuery Mobile中要实现页面的预加载,另外一种方法是调用JavaScript代码中的全局性方法$.mobile.loadPage(),其效果跟data-prefetch一样。

3、示例代码:

<!DOCTYPE HTML >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/>
  <script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script>
  <script src="Js/jquery.mobile-1.2.0.min.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.html"rel="external" data-prefetch="ture">点击进入</a></p>
</div>
<div data-role="footer"><h1>@2013 3i studio</h1></div>
  </div>
 </BODY>
</HTML>


4、效果图预览:


JQuery Mobile入门——预加载页面_第1张图片


5、通过预加载方式,目标页面已注入当前页面:


你可能感兴趣的:(JQuery Mobile入门——预加载页面)