使用APICLOUD,imageCache图片缓存
在开发APP的时候会用到图片缓存处理,使用imageCache来做缓存处理,先异步获取出数据列表,再获取列表的图片路径$api.attr(obj, 'data-url') 来做缓存
function ajaxGetMore(cid,page){ //apiready = function () { //注意,使用apicloud的 api时必需要使用apiready var y = api.pageParam.y; //接值 头部高度 var h = api.pageParam.h; //接值 底部高度 api.showProgress();//显示加载进度框 api.ajax({ url: 'http://zx.zhix.net/cms/api/get_list', method: 'post', data: { values: { cid: cid, page:page } } }, function(ret, err) { api.hideProgress();//隐藏加载进度框 if(ret){ html = ""; for(var i=0;i<ret.length;i++){ html +='<div class="item"><a onclick="openPhoto('+ret[i].id+');"><div><img class="list_img" data-url="'+ret[i].title_pic+'" /></div><div>'+ret[i].title+'</div></a></div>'; } $('#xgtlist').append(html); imageCache(); //使用图片缓存 $('#more').attr('cid',api.pageParam.cid); $('#more').attr('page',ret[0].page); }else{ api.alert({msg:('错误码:'+err.code+';错误信息:'+err.msg+'网络状态码:'+err.statusCode)}); } }); //} }
缓存方法
//图片缓存 function imageCache() { var srcs = $api.domAll('.list_img'); if (srcs.length > 0) { for (var i = 0; i < srcs.length; i++) { (function(obj){ api.imageCache({ url: $api.attr(obj, 'data-url') }, function(ret, err){ if( ret ){ $api.attr(obj, 'src', ret.url); } }); })(srcs[i]); } } }
之前是使用这样的方法,但是发现APICLOUD的 图片缓存方法在for循环中无效 帮才用上面的方法,请忽用下面不生效的方法,之前用的方法也在下面做个举例:
function ajaxGetMore(cid,page){ //apiready = function () { //注意,使用apicloud的 api时必需要使用apiready var y = api.pageParam.y; //接值 头部高度 var h = api.pageParam.h; //接值 底部高度 api.showProgress();//显示加载进度框 api.ajax({ url: 'http://zx.zhix.net/cms/api/get_list', method: 'post', data: { values: { cid: cid, page:page } } }, function(ret, err) { api.hideProgress();//隐藏加载进度框 if(ret){ html = ""; for(var i=0;i<ret.length;i++){ api.imageCache({ url: ret[i].title_pic, //ret[i].title_pic 是异步的图片地址 }, function(ret, err) { var imgurl = ret.url; }); html +='<div class="item"><a onclick="openPhoto('+ret[i].id+');"><div><img class="list_img" src="'+imgurl+'" /></div><div>'+ret[i].title+'</div></a></div>'; } $('#xgtlist').append(html); $('#more').attr('cid',api.pageParam.cid); $('#more').attr('page',ret[0].page); }else{ api.alert({msg:('错误码:'+err.code+';错误信息:'+err.msg+'网络状态码:'+err.statusCode)}); } }); //} } //最终此方法无效 还是用开始的方法,缓存成功