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

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM