`
decentway
  • 浏览: 157538 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

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 });

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

分享到:
评论

相关推荐

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    jQuery Mobile参考手册

    3.jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。 4.通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容...

    jQuery mobile相册的一种样式

    jQuery mobile相册的一种样式

    Jquery Mobile 帮助手册

    jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。

    jQuery Mobile API文档

    jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI...

    jQuery Mobile快速入门完整版.pdf + 所有源码

    作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...

    jQuery Mobile音乐播放实例源码

    jQuery Mobile音乐播放代码 为什么使用 jQuery Mobile? 通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备。 lamp 不同设备使用了...

    jQuery Mobile 所需要的部署文件

    本资源以Hello Word为例,里面包含了jQuery Mobile框架所需要的部署文件。

    jQuery Mobile 1.0正式发布

    jQuery Mobile是jQuery在手机和平板设备上的版本,用于创建针对智能手机和平板电脑的跨设备Web应用。 jQuery Mobile旨在“为jQuery社区创建一个优雅的能够兼容当前所有主流移动平台的HTML5 UI库”。jQuery Mobile...

    JQUERYMOBILE 提示框

    JQUERYMOBILE 提示框 用语JQUERYMOBILE 移动开发的提示框

    jquery ui及jquery mobile技巧与示例源代码

    原书名:jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples 原出版社: Addison-Wesley Professional 作者: (荷)Adriaan de Jonge (美)Phil Dutson 译者: 包勇明 程学彬 出版社:人民邮电出版社 ...

    jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery Mobile

    jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery MobilejQuery Mobile jqm 新闻阅读器 jqm图标更换 jQuery Mobile jqm 新闻阅读器 jqm自定义按钮的图片以及header和footer的定位

    jQuery mobile滑动式的标题导航

    jQuery mobile滑动式的标题导航

    jQuery Mobile快速入门.pdf

    jQuery Mobile快速入门.pdf

    jQueryMobile-HTML5模板

    jquerymobile是用于创建移动 Web 应用的前端开发框架,此资源包含了几套jquerymobile的模板,供新手学习。

    《构建跨平台APP-jQuery.Mobile移动应用实战》 PDF

    第二篇是jQuery Mobile基础篇,介绍了jQuery Mobile中对话框、工具栏、按钮、表单、布局和插件的使用;第三篇是跨平台APP实战篇,介绍了6个使用jQuery Mobile开发的实际APP;第四篇是发布和推广应用篇,介绍了在开发...

    《响应式网页开发实战》教学教案—第9章 jQuery Mobile样式.pdf

    《响应式网页开发实战》教学教案—第9章 jQuery Mobile样式.pdf《响应式网页开发实战》教学教案—第9章 jQuery Mobile样式.pdf《响应式网页开发实战》教学教案—第9章 jQuery Mobile样式.pdf《响应式网页开发实战》...

    JQuery Mobile学习助手

    “JQuery Mobile学习助手”包含了对JQuery Mobile中的所有组件、接口的详细介绍。对于JQuery Mobile的初学者,可以从中学习JQuery Mobile的所有接口与组件的功能,同时通过范例进行练习;对于JQuery Mobile开发人员...

    jquerymobile设计完整例子

    jquerymobile例子 包含从登陆到菜单和各种菜单切换完整设计 上传只为分享

Global site tag (gtag.js) - Google Analytics