您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 交互设计 >> 浏览设计教程

TGideas实例:加载,不只是少一点点(3)

为XXX的XML文件中;使用load(“XXX”)方法加载本地的XXX.xml文件,并用getAttribute获取已经存储的内容。

图2-8 IE的本地存储数据

关于HTML5本地存储localStorage的详细方法,请参见我的翻译文章《网络应用程序本地存储的前世今生》。

图2-9 Chrome的本地存储数据

对于IE浏览器,使用IE提供的userData方法;对于支持HTML5的浏览器(Firefox、Chrome、Safari、Opera等),使用localStorage提供的方法;对于其他浏览器使用常规方法加载内容。

图2-10 判断流程

1.2.2 资源处理

对于本地存储,我们可以使用来存储数据,或者能转为数据形式的文件。例如一些SEO要求不高的文字,链接等等。

图2-11 数据存储

对于图片、CSS、JS等文件,我们也可以转为文本来存储在本地。这种方式大量应用于移动端。例如《掌上英雄联盟》APP的图片大部分都转化为base64编码存储在本地(不用离线存储的原因前面提及了)。Google和Bing的移动版,也将CSS和JS拆分后本地存储了。

图2-12 脚本的本地存储

图2-13 图片转base64编码后的本地存储

另外,对于本地存储更新,我的做法是:先判断本地是否存在已存储的内容,如果没有数据或者版本已过期(所谓版本是我设置的一个变量,当修改这个变量时即为版本过期),加载相应的JS数据,通过一个函数将数据处理为需要的格式,然后存储在本地;如果有且版本没过期,直接从本地获取数据。接着将数据通过函数进行进一步的处理,插入相对应的结构中。

图2-14 本地数据版本判断

 

 

第2章 按需加载

2.1 滚动加载

2.1.1 滚动加载的方法

其实这是很多大型网站都使用了的方法,比如淘宝、拍拍等等。对于不同显示器分辨率不同,所以第一屏高度不一样,节省的加载量所浮动。

首先,记录所有需要滚动加载对象的纵坐标值到一个数组。然后使用JS的监听方法(IE是attachEvent,其他浏览器是addEventListener)

[教程作者:admin]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/id1321.html
确认按钮在左边,取消按钮在右边?
体验新版Apple AppStore ——App设计从业人员必读
图趣网微信
建议反馈
×