在前端開發(fā)中,app開發(fā)往往是不可忽視的重要環(huán)節(jié),像是我們通常會借助apicloud平臺來開發(fā)app。在APP的開發(fā)中圖片的加載作為用戶體驗一個重要標(biāo)準(zhǔn),往往也是客戶衡量app體驗好壞的一個指標(biāo),今天小編就來分享一下自己的開發(fā)心得。
相信每個開發(fā)者都希望自己app的圖片如上圖一樣能夠快速的打開圖片,而不是每次都需要向服務(wù)器不斷地請求數(shù)據(jù)不停地轉(zhuǎn)圈。在apiclound中,有很多是關(guān)于數(shù)據(jù)存儲的,其中具有關(guān)于圖片的imagecache.
這次我們還是先次官方是如何說的
圖片緩存
imageCache({params}, callback(ret, err))
params
url:
類型:字符串
默認(rèn)值:無
描述:圖片遠(yuǎn)程地址
encode:
類型:布爾
默認(rèn)值:true
描述:(可選項)是否對url進(jìn)行編碼。默認(rèn)或傳true時,Android將始終對url編碼,而iOS只有在url不合法(如存在中文字符)的時候才進(jìn)行編碼。如果url中有特殊字符需要編碼的,建議先在js層進(jìn)行編碼,然后此參數(shù)傳false。
policy:
類型:字符串
默認(rèn)值:default
描述:(可選項)緩存策略
取值范圍:
default //默認(rèn)為 cache_else_networkcache_else_network //若服務(wù)器上沒有更新,則使用緩存no_cache //不使用緩存,始終從服務(wù)器獲取cache_only //當(dāng)緩存存在時,只從緩存中讀取
thumbnail:
類型:布爾類型
默認(rèn)值:true
描述:(可選項)使用縮略圖,底層將根據(jù)當(dāng)前系統(tǒng)及設(shè)備性能,返回最優(yōu)的縮略圖,有利于提高應(yīng)用運(yùn)行及渲染效率
tag:
類型:字符串
默認(rèn)值:無
描述:(可選項)標(biāo)識信息,將在回調(diào)中返回
callback(ret, err)
ret:
類型:JSON 對象
內(nèi)部字段:
{ status:true, //是否成功,布爾類型 url:'' //圖片本地存儲路徑,若下載失敗,則返回傳入的url,字符串類型 tag:'' //標(biāo)識信息,字符串類型} 以上是官方的說法,小編的理解是imagecache是一個可以把http或者h(yuǎn)ttps或者widget地址直接轉(zhuǎn)為手機(jī)上的地址的一個工具,它所存儲的位置: Android的默認(rèn)沙箱位置:sdcard/UZMap/appId iOS的默認(rèn)沙箱位置:Documents/uzfs/appId; 當(dāng)然我們也可以通過config文件來修改默認(rèn)存儲位置像是上圖的案例,代碼如下
本案例中,先是通過ajax通過get的方法獲取圖片,如果存在圖片的話(響應(yīng)值為200),則調(diào)用圖片imagecache,先把服務(wù)器的圖片路徑轉(zhuǎn)為手機(jī)存儲的路徑并同時緩存圖片,但是這里存在問題,因為這里一共三張圖片,如果其中有一個圖片沒有調(diào)到,這樣就會有空的很尷尬,所以設(shè)置了兩個函數(shù) 初始值都是1,這種的有關(guān)分為兩種 一個是圖片沒有與服務(wù)器建立通信,另一個是沒有該圖片資源,如果三個圖片都沒有的話,就會執(zhí)行刷新頁面。
app案例地址:
或者在appstore里直接搜索“易挖”
或者appstore里搜索易挖
好了,以上就是小編今天所分享的文章,如果想關(guān)注更多小編的文章就來文匯軟件關(guān)注小編吧!