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));
}
});

}
}