php缓存图片问题,使用图片缓存imageCache api方法要填的两处坑

apicloud图片缓存用法html示例:

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

}

});

}

}