首页 > 建站教程 > APP开发,混合APP >  apicloud图片缓存的使用和查看清除缓存正文

apicloud图片缓存的使用和查看清除缓存

一、缓存列表图片
//循环数据的时候加载执行一个缓存图片的函数
<script type="text/x-dot-template" id="listT">

{{ for (var i = 0; i < it.length; i++) { }}
    <img class="aui-img-object aui-pull-left" onload="fnLoadImage(this)"  data-url="{{=it[i].smeta}}" src="../image/demo.png">

{{ }; }}
</script>

//执行的函数
function fnLoadImage(ele_) {
    var imageURL = $api.attr(ele_, 'data-url');
    if (imageURL) {
        api.imageCache({
            url : imageURL
        }, function(ret, err) {
            if (ret.status) {
                ele_.src = ret.url;
                $api.removeAttr(ele_, 'data_url');
            }
        });
    }
}
二、读取缓存和清除函数
//模板文件
<ul class="aui-list-view">
  <li class="aui-list-view-cell" tapmode onclick="fnClearCache()">
      <a class="aui-arrow-right">
       清除缓存
      <span class="aui-badge aui-badge-danger" id='cacheSize'></span>
       </a>
  </li>
</ul>

//获取缓存方法
function fnGetCacheSize(){
            api.getCacheSize(function(ret){
                var size = parseInt(ret.size / 1024 / 1024 * 100) / 100 + ' MB';
                var cacheSize=$api.byId('cacheSize');
                cacheSize.innerHTML=size;
            });
}

//清除缓存方法
function fnClearCache(){
            api.showProgress({
                title: '清除缓存中...',
            });

            api.clearCache(function(){
                setTimeout(function(){
                    api.hideProgress();
                    fnGetCacheSize();
                },500)
            });
}
三、监听缓存的实时改变
//在frameGroup的回调方法中 监听缓存实时改变
if(ret.index == 3){
    var jsfun = 'fnGetCacheSize();';
    api.execScript({
    frameName: 'frame3',
    script: jsfun
    });
}