img标签过滤加fs模块实现图片文件缓存

方法一：
function iCache(selector) {

        selector.each(function(data) {

                //msg(data);

                ! function(data) {

                        var url = selector.eq(data).attr("src");

                        var img = this;

                        var filename = GetFileName(url);

                        var path = "cache://" + filename;

                        var obj = api.require('fs');

                        obj.exist({

                                path : path

                        }, function(ret, err) {

                                //msg(ret);

                                if (ret.exist) {

                                        if (ret.directory) {

                                                //api.alert({msg:'该路径指向一个文件夹'});

                                        } else {

                                                //api.alert({msg:'该路径指向一个文件'});

                                                //selector.eq(data).src=path;

                                                selector.eq(data).attr('src', null);

                                                path = api.cacheDir + '/' + filename;

                                                selector.eq(data).attr('src', path);

                                                //console.log(selector.eq(data).attr("src"));

                                        }

                                } else {

                                        api.download({

                                                url : url,

                                                savePath : path,

                                                report : false,

                                                cache : true,

                                                allowResume : true

                                        }, function(ret, err) {

                                                //msg(ret);

                                                if (ret) {

                                                        var value = ('文件大小：' + ret.fileSize + '；下载进度：' + ret.percent + '；下载状态' + ret.state + '存储路径: ' + ret.savePath);

                                                } else {

                                                        var value = err.msg;

                                                };

                                        });

                                }

                        });

                }(data);

        });

};

1.定义使用标签<img src="http://域名/aaa.jpg" class="cache">,比如
<body>
<ul>
<li><img src="http://域名/a.jpg" class="cache"></li>
<li><img src="http://域名/ab.jpg" class="cache"></li>
<li><img src="http://域名/aab.jpg" class="cache"></li>
<li><img src="http://域名/aaab.jpg" class="cache"></li>
</ul>
</body>
//此处是引用的库文件，api.js,zepto.js等
<script    XXXXX  >
<script>
  function iCache(){
  //上面的定义
}
apiready=function（）{
//(1)初始化工作

//2获取数据

//3封装页面

//4过滤页面链接

iCache($('.cache'));
}

</script>

2.引入zepto.js

3.利用dom.js等模板库或者封装字符串做好页面元素布局

4.iCache($('.chache'))调用即可

效果，第一次是使用网络路径，之后即可缓存到本地，后面打开就不会去访问网络地址了。

二：使用apicloud的 imgcache方法

图片

<img onload="imageCache(this)" data-url="{{=value.img_url}}" class="thumbnail" src="../image/zd.png">

图片src必须为存在的图片，否则不会启用
```
imageCache
```
方法

//列表图片缓存

function imageCache(ele_){

        var imageURL = $api.attr(ele_, 'data-url');

        api.imageCache({

            url: imageURL

        }, function(ret, err){

                if(ret.status){

                        ele_.src = ret.url;

                        $api.removeAttr(ele_, 'data-url');

                }

        });

}

简答说,就是不直接设置src图片属性,而是交给imageCache,imageCache内部的处理逻辑应该是如果本地有,就直接返回本地地址,如果本地没有,就下载后返回本地地址(YY); 图片路径用 data-url 表示不直接用使用 src

apicloud 人脸识别登录

http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=14931

巴特西

img标签过滤加fs模块实现图片文件缓存

最新文章

热门文章