TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)(3)
圖2-8 IE的本地存儲(chǔ)數(shù)據(jù)
關(guān)于HTML5本地存儲(chǔ)localStorage的詳細(xì)方法,請(qǐng)參見(jiàn)我的翻譯文章《網(wǎng)絡(luò)應(yīng)用程序本地存儲(chǔ)的前世今生》。
圖2-9 Chrome的本地存儲(chǔ)數(shù)據(jù)
對(duì)于IE瀏覽器,使用IE提供的userData方法;對(duì)于支持HTML5的瀏覽器(Firefox、Chrome、Safari、Opera等),使用localStorage提供的方法;對(duì)于其他瀏覽器使用常規(guī)方法加載內(nèi)容。
圖2-10 判斷流程
1.2.2 資源處理
對(duì)于本地存儲(chǔ),我們可以使用來(lái)存儲(chǔ)數(shù)據(jù),或者能轉(zhuǎn)為數(shù)據(jù)形式的文件。例如一些SEO要求不高的文字,鏈接等等。
圖2-11 數(shù)據(jù)存儲(chǔ)
對(duì)于圖片、CSS、JS等文件,我們也可以轉(zhuǎn)為文本來(lái)存儲(chǔ)在本地。這種方式大量應(yīng)用于移動(dòng)端。例如《掌上英雄聯(lián)盟》APP的圖片大部分都轉(zhuǎn)化為base64編碼存儲(chǔ)在本地(不用離線存儲(chǔ)的原因前面提及了)。Google和Bing的移動(dòng)版,也將CSS和JS拆分后本地存儲(chǔ)了。
圖2-12 腳本的本地存儲(chǔ)
圖2-13 圖片轉(zhuǎn)base64編碼后的本地存儲(chǔ)
另外,對(duì)于本地存儲(chǔ)更新,我的做法是:先判斷本地是否存在已存儲(chǔ)的內(nèi)容,如果沒(méi)有數(shù)據(jù)或者版本已過(guò)期(所謂版本是我設(shè)置的一個(gè)變量,當(dāng)修改這個(gè)變量時(shí)即為版本過(guò)期),加載相應(yīng)的JS數(shù)據(jù),通過(guò)一個(gè)函數(shù)將數(shù)據(jù)處理為需要的格式,然后存儲(chǔ)在本地;如果有且版本沒(méi)過(guò)期,直接從本地獲取數(shù)據(jù)。接著將數(shù)據(jù)通過(guò)函數(shù)進(jìn)行進(jìn)一步的處理,插入相對(duì)應(yīng)的結(jié)構(gòu)中。
圖2-14 本地?cái)?shù)據(jù)版本判斷
第2章 按需加載
2.1 滾動(dòng)加載
2.1.1 滾動(dòng)加載的方法
其實(shí)這是很多大型網(wǎng)站都使用了的方法,比如淘寶、拍拍等等。對(duì)于不同顯示器分辨率不同,所以第一屏高度不一樣,節(jié)省的加載量所浮動(dòng)。
首先,記錄所有需要滾動(dòng)加載對(duì)象的縱坐標(biāo)值到一個(gè)數(shù)組。然后使用JS的監(jiān)聽(tīng)方法(IE是attachEvent,其他瀏覽器是addEventListener)
本文地址:http://m.likemindfilms.com/tutorial/id1321.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開(kāi)始
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏