小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

最新推荐文章于 2017-08-01 15:25:00 发布

小小IT人

最新推荐文章于 2017-08-01 15:25:00 发布

阅读量574

点赞数

分类专栏： web开发

web开发专栏收录该内容

23 篇文章

订阅专栏

本文介绍了在使用jQuery Mobile开发移动网站时如何利用预取技术来提高页面切换速度，并提供了具体的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版，在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求，用户会感到略有停顿。使用多页模版，可以改善页面跳转之间的流畅性，但是多个页面要一次性下载，所以下载时间变长，用户体验也会受到影响。

在基于预取技术的开发中，当第一个页面的DOM对象加载完成后，jQuery Mobile会对标记data-prefetch的链接地址进行预取操作。预取的详细过程如下：

注意：使用预取功能时，不建议给所有链接都添加data-prefetch属性，因为过多的data-prefetch属性导致移动设备需要预取的页面数量过多，加载的DOM对象过大，导致手机内存消耗，部分手机运行缓慢甚至崩溃。

为了有效节省移动设备浏览器的内存资源，对于没有标记缓存的页面，在访问下一个页面的时候将被清理掉。

如果不想清理掉之前页面在浏览器中的缓存，可以在相应的DOM对象上添加data-dom-cache="true",其实还有一个更好的方法，通过HTML5的离线应用功能将页面内容缓存在本地。

相关示例代码如下：

[html]view plaincopy 
   
print?
 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>练习</title>  
 <meta charset="utf-8">  
 <meta name="viewport" content="width=device-width,   
       initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />  
 <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 id="page_PageTransition" data-role="page" data-dom-cache="true">  
         <header data-role="header">  
             <h1>预取页面处理</h1>  
         </header>  
         <div class="content" data-role="content">  
             <p>这段演示将呈现采用与不采用预取技术的两种页面切换方式。</p>  
             <a href="PrefetchPage01.html" data-prefetch>采用预取技术的页面</a><br/>  
             <a href="PrefetchPage02.html" rel="external">传统的页面跳转实现</a>  
         </div>  
     </div>  
 </body>  
 </html>  

PrefetchPage01.html

[html]view plaincopy 
   
print?
 <section id="page_PageTransition2" data-role="page">  
     <header data-role="header">  
         <h1>页面跳转</h1>  
     </header>  
     <div class="content" data-role="content">  
         <p>跳转到经过预取技术的页面</p>  
     </div>  
 </section>  

PrefetchPage02.html

[html]view plaincopy 
   
print?
 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>练习</title>  
 <meta charset="utf-8">  
 <meta name="viewport" content="width=device-width,   
       initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />  
 <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>  
     <section id="page_PageTransition3" data-role="page">  
         <header data-role="header">  
             <h1>页面跳转</h1>  
         </header>  
         <div class="content" data-role="content">  
             <p>跳转到传统的JQuery Mobile页面</p>  
         </div>  
     </section>  
 </body>  
 </html>  