`
decentway
  • 浏览: 160237 次
  • 性别: 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 Mobile 所需要的部署文件

    jQuery Mobile 是一个轻量级的、基于 jQuery 库的框架,专为移动设备上的网页应用设计,它提供了丰富的用户界面(UI)组件和交互效果,让开发者能够快速构建响应式和触控友好的Web应用程序。这个资源包以“Hello ...

    Jquery mobile 从设计到开发

    jQuery Mobile 是一个广泛使用的框架,特别适合于移动设备和桌面浏览器。它允许开发者使用HTML5、CSS3和JavaScript来创建响应式网页应用。这个框架之所以在移动开发中受到青睐,是因为它可以将现有的网页转换成触摸...

    jQuery mobile相册的一种样式

    在IT行业中,jQuery Mobile是一种广泛使用的前端框架,它专门用于构建响应式和触屏友好的移动Web应用。jQuery Mobile提供了一系列的UI组件和交互效果,其中包括我们今天要讨论的主题——相册样式。在这个主题下,...

    jQueryMobile-HTML5模板

    2. **自动页面导航**:通过数据-URL(data-url)属性和页面容器,jQuery Mobile可以自动管理页面的加载和切换,实现平滑的页面过渡效果。 3. **可定制的主题系统**:jQuery Mobile提供了一套主题引擎,允许开发者...

    jQuery mobile相册

    jQuery Mobile相册是一种基于jQuery Mobile框架的移动应用组件,它为用户提供了一种优雅的方式来展示和浏览图片集,尤其适用于移动设备。jQuery Mobile是jQuery库的一个分支,专为触摸设备优化,提供了一套完整的UI...

    jquerymobile设计完整例子

    jQuery Mobile 是一个轻量级、响应式的前端框架,专为触摸设备的网页设计和开发而构建。它简化了创建移动友好的网页应用的过程,提供了丰富的组件和交互效果,使得开发者可以快速构建功能丰富的移动界面。在“jQuery...

    jquery mobile datepicker 手机端日期选择器

    jQuery Mobile Datepicker 是一个专为手机端设计的日期选择器插件,它基于流行的 jQuery 和 jQuery Mobile 库,为开发者提供了丰富的功能和自定义选项。本文将深入探讨这个插件的使用方法、核心功能以及如何对其进行...

    android jqueryMobile 类库和实例源代码

    本篇文章将深入探讨jQuery Mobile在Android环境中的应用,以及如何利用提供的类库和实例源代码进行开发。 一、jQuery Mobile简介 jQuery Mobile是一个轻量级的、触屏优化的JavaScript框架,专为构建跨平台、跨设备...

    jQuery、jQueryUI及jQueryMobile技巧与示例

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

    jquery mobile 1.4.5demo和说明

    3. `jquery.mobile.inline-svg-1.4.5.css` 和 `jquery.mobile.inline-png-1.4.5.css`:分别用于内联SVG和PNG图标的样式定义。 4. `jquery.mobile.structure-1.4.5.css`:基础结构样式,负责布局和组件的基本外观。 ...

    jQuery Mobile快速入门.pdf

    综上所述,jQuery Mobile 作为一款成熟的移动 Web 开发框架,不仅提供了丰富的 UI 组件和强大的功能支持,还拥有活跃的社区和完善的文档体系,非常适合希望快速构建高质量移动 Web 应用的开发者们使用。通过本文的...

    jQuery Mobile 高级设计模板

    jQuery Mobile 是一个流行的前端框架,专为移动设备和触摸交互设计,它简化了在不同设备上创建响应式、触摸友好的网页应用的过程。这个高级设计模板是针对那些希望利用jQuery Mobile的强大功能,构建出具有专业外观...

    jQuery Mobile实战源码

    对于页面布局,jQuery Mobile使用了流式布局和媒体查询,确保在不同屏幕尺寸和方向下的良好显示。源码中的CSS文件,如`jquery.mobile.css`,包含了这些布局规则。你可以研究这些样式,理解如何创建适应性布局,以及...

    jQuery Mobile参考手册

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

    jQuery mobile滑动式的标题导航

    jQuery Mobile 提供了多种事件来监听页面的生命周期,比如`pagebeforeshow`和`pageshow`,可以用于在页面显示前或显示后执行某些操作。例如,我们可以使用`pageinit`事件初始化滑动式标题导航: ```javascript $...

    jquery mobile官方git资源

    文档详细介绍了jQuery Mobile的各种组件、事件、API和最佳实践,帮助开发者了解如何有效地利用这个框架。示例部分则提供了各种实际应用,涵盖导航、表单、按钮、面板等元素,通过这些示例,开发者可以直观地理解各个...

    jquery mobile 1.4.2 和 jquery 1.8.3

    为了适应移动设备的多样化需求,前端开发工具也在不断进化,其中jQuery Mobile和jQuery是两个至关重要的组件。本文将深入探讨jQuery Mobile 1.4.2和jQuery 1.8.3这两个版本在手机网站开发中的应用,以及它们如何协同...

    jquery mobile 1.4.1版

    此外,还有一些针对外部PNG和内联PNG的CSS文件,如`jquery.mobile.external-png-1.4.1.css`和`jquery.mobile.inline-png-1.4.1.css`,它们提供了对不同格式图片的支持,确保在各种设备上都能正确显示。 最后,`...

    Jquery Mobile 帮助手册

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

    jQuery Mobile API文档

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

Global site tag (gtag.js) - Google Analytics