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

最新推荐文章于 2021-03-12 08:22:27 发布

樱木_花道

最新推荐文章于 2021-03-12 08:22:27 发布

阅读量2.8k

点赞数

分类专栏： apicloud 文章标签：缓存图片

本文链接：https://blog.csdn.net/qq_33824364/article/details/51934910

版权

apicloud 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、缓存列表图片

 //循环数据的时候加载执行一个缓存图片的函数
 <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
    });
}