当前位置: 代码迷 >> Web前端 >> jquery mobile 缓存跟预读取
  详细解决方案

jquery mobile 缓存跟预读取

热度:734   发布时间:2012-06-26 10:04:13.0
jquery mobile 缓存和预读取

1. 预取页面 Prefetching pages (总觉得不应该这样翻译,应该叫预加载)

说明:当采用single-page类型时,我们可以预先加载页面到dom树里(ps:通过浏览器的查看可以看到,ff里是浅色)。jqm会在当前page加载后,加载那个具有 data-prefetch 标签(target)的page,这时候pagecreat事件就被触发,你就可以在dom里面看到这个页面本没有的pages。

方法:1. <a id="setting" data-icon="custom" href="settings.php" data-prefetch >设置</a>

2. $.mobile.loadPage( pageUrl, { showLoadMsg: false } );

优点:当预取页面时候,用户看不到ajax请求页面的信息(ps:只要不是多图杀猫时代)。

经过本人测试:页面不预取的情况跳转链接页面时候会出现菊花,当预取之后,菊花没有了,速度提升了,但是设定预取的页面会出现页面已经加载完毕,联网的菊花还在转,说明程序在ajax预取!反正你都会看到菊花^_^!!! 适用场景:因为预取页面会产生额外的HTTP请求并占据了带宽,所以明智的选择是:预取的页面被访问可能性是最高的。所以一般会被应用于 相片画廊,让用户可以快速在相片之间切换。

2.控制dom大小 DOM size management

对于页面的动画切换(沙发里浏览器支持的最好),两个切换的页面都需要在dom里,因此,旧的页面可能会占满浏览器的缓存空间,甚至会导致一些移动浏览器运行缓慢,或崩溃(我的touch就崩了)。

因此,jqm提供一个简单的机制来控制dom的大小。

只要是通过ajax加载的页面,当你长时间(ps:具体多长时间文档没有说,我是测试到了,如果你把预取的页面射到缓存里,那么你肯定看不到这个效果)不去访问他jqm 会标记并从dom中删除他,如果你重新访问一个被删除的页面,浏览器会从他的缓存里面找这个网页对应的html文件,如果没有缓存,就只能从服务器重新获取。(In the case of nested list views, jQuery Mobile removes all the pages that make up the nested list once you navigate to a page that's not part of the list)。

这个机制对多网页页面不受用,因为jqm只删除那些通过ajax加载的页面。

3.dom 缓存

Caching pages in the DOM

我们可以告诉jqm保留那些我们之前访问过的页面,而不是删除她们。

方法: 1.$.mobile.page.prototype.options.domCache = true;

2.<div data-role="page" id="cacheMe" data-dom-cache="true">

3.pageContainerElement.page({ domCache: true });

这部分就没什么可翻译了。

  相关解决方案