apicloud圖片快取用法html示例:

<img class="lazy" data-src="{{=value.img}}" src="../image/placeholder.png" onload="loadImg(this);">

js:

function loadImg(ele_) {
var dataurl = $api.attr(ele_, 'data-src');
api.imageCache({
url: dataurl,
thumbnail:true
}, function(ret, err) {
if (ret) {
if (ret.status) {
// console.log(ret.url);
ele_.src = ret.url;
}
} else {
alert(JSON.stringify(err));
}
});
}

這是官方推薦的使用快取api imageCache的方法。

上述程式碼，原意是想讓圖片佔位符載入完成時，執行onload方法，方法裡面呼叫apicloud imageCache()方法，生成圖片快取，再將快取圖片地址賦值到圖片src上，以加快圖片渲染效率進而提高頁面執行及渲染效率，保證應用流暢性

但這樣寫忽略了一個很嚴重的問題：src賦值，圖片地址改變，等圖片載入完後又會觸發執行onload，這樣就進入死迴圈執行onload啦！

另外：thumbnail引數設為true,ios下會有"圖片顯示模糊"問題需改設成false;但設為false,android下有"列表頁載入比較多的圖片，滑動頁面時內容卡頓顯示"現象,固要分平臺設定thumbnail引數值：android:true, ios:false

改寫後的loadImg方法：

function loadImg(ele_) {
var thumbnailBoolean=api.systemType=='ios'?false:true,
dataurl = $api.attr(ele_, 'data-src');
if (dataurl) {
api.imageCache({
url: dataurl,
thumbnail:false
}, function(ret, err) {
if (ret) {
if (ret.status) {
// console.log(ret.url);
ele_.src = ret.url;
$api.removeCls(ele_, 'lazy');
$api.addCls(ele_, 'imgloaded');

// src賦值，也會觸發onload，防止迴圈執行必須移除對應屬性
$api.removeAttr(ele_, 'data-src');
$api.removeAttr(ele_, 'onload');
}
} else {
alert(JSON.stringify(err));
}
});

}
}