jquery mobile页面缓存

JQM，为了是页面访问速度加快，每一个链接都是通过AJAX 方式进行载入，不会加载新页面HEAD 区域的内容。

Jquery Mobile支持包含历史回退按钮的自动ajax读取外部页面的功能，

基本页面结构。

1 <divid="page"data-role="page">
2 内容区域、、
3 div>

链接时，通过 AJAX， 将链接页面的PAGE 部分，载入至 首页。 而为了防止内存占用过高，使浏览内存较低的设备出现浏览器崩溃的情况。 JQM 只会缓存一个页面至页面中 。当请求另一个页面时，即将上一个页面的PAGE 区的DOM 移除。当在返回这个页面时，从历史记录中，重新加载该页面。

强制缓存页面的方法

在页面的page 上加入

data-dom-cache="true"

页面预加载，

在链接上加入

data-prefetch

如：
 ... 
也可以，
$.mobile.loadPage(PageUrl,{showLoadMsg: false });

JQM 中的事件 。

        点击 ， tap 。

                  在快速完成一次点击时，触发。 等同于 ，WEB 事件中的click ..

                   $("#a").live("tap",function(){

                               // 您想执行的code

                   });

      点住不放 ， taphold

                   在按住不放后触发该事件(接近一秒钟的时间).

               向上滑动，swipe 垂直向上滑动距离超过30CM 时触发。

       向左滑动，swipeleft


       向右滑动，swiperight

       方向改变时。

       orientationchange 即，通过重力感应旋转手机时，触发的函数。 在本地应用中，可以关闭手机重力感应系统，而在web 中不能关闭此功能。

i)在页面中添加这个属性，就可以将当前页面缓存到Dom缓存中，这样做的意义就是在下次再次访问这个页面的时候，就会调用Dom缓存中的页面。

data-dom-cache=true

ii)js后台中可以动态的添加下面属性，就可以设置当前页面缓存

$.mobile.page.prototype.options.domCache = true;  

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

.页面page控制、缓存问题

jquery mobile的页面机制主要分两种，一是单页，而是多页。

单页就是你在一个 html页面里面把所有需要用到的page都写在里面了，这个时候页面之间的转场一个可以靠 a标签里的href，里面是想要转到页面的ID

< A href = "#page_id" > A >

单页里面写到的page都会一直存在于dom中，所以不存在缓存的问题，页面转换时也不需要ajax去获取新加载页面的内容。缺点就是当需求比较多时，在一个html页面写完整个app需要的page和相应的js，页面会显得臃肿而且不好维护。

那么我们更多的是使用多页的机制，把每个page独立写到不同的html页面里，在需要转到对应页面时，才通过ajax去获取页面的内容和js，这样使我们的app代码部署就如我们网站开发一样，一个页面一个html文件。

这样就会存在一个问题，因为每个page不像单页一样写在一起，jquery mobile的机制只会把需要显示的page加载到dom里面，当离开这个page时，会自动把这个page的dom清除掉，假如你想要保留这个page在dom里，以后再次显示，需要加上 data-dom-cache="true" 一属性

< DIV data-dom-cache = "true" data-role = "page" >
page内容
DIV >

解决了page缓存的问题，那么又会遇到page里的js问题。例如我希望把page的dom缓存下来，但是我又希望每次这个page显示的时候，触发执行一些js，那么这个时候我们在对应page的事件处理时，就不能用 pageinit而是要用pageshow了，因为pageinit只在这个page从dom加载进来时触发，如果page缓存了，那么pageinit只会在第一次时触发。

$( '#page_id' ).bind( 'pageshow' , function (){
//页面每次显示你需要做的
})

除了pageshow，还有pagehide、pageremove、pagebeforeshow、pagebeforehide等等事件响应，都是可以针对不同的需求使用的。

******************************************************************************************

// 去掉缓存 重新加载

1.　是否有加　data-dom-cache＝"true" ，有的话直接去掉，

2.    使用$.mobile.changepage(B页面，{reloadpage:true});

******************************************************************************************

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

实例2-6　jQuery Mobile页面缓存

1. 功能说明

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

2. 实现代码

新建一个HTML页面2-6.htm，加入代码如代码清单2-6所示。

代码清单 2-6　jQuery Mobile 页面缓存




   
   
              rel="Stylesheet" type="text/css" />
   
   
   


 

　　

缓存页面

　　

　　    

这是一个被缓存的页面

　　

　　

2012 rttop.cn studio

　

3. 页面效果

该页面在Opera Mobile Emulator 12.0下执行的效果如图2-6所示。

4. 源码分析

本实例通过添加“page”容器的“data-dom-cache”属性，将对应容器中的全部内容写入缓存中。一般说来，如果需要将页面的内容写入文档缓存中，有以下两种方式：

·在需要被缓存的元素属性中添加一个“data-dom-cache”属性，设置该属性值为“true”或不设置属性值均可。该属性的功能是将对应的元素内容写入缓存中。

·通过JavaScript代码设置一个全局性的jQuery Mobile属性值为“ture”，即添加代码“$.mobile.page.prototype.options.domCache = true”，可以将当前文档写入缓存中。

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