在開發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)});
}
});
//}
}
//最終此方法無效 還是用開始的方法,緩存成功
