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

huguoba

本帖最后由 huguoba 于 2015-11-18 09:14 编辑

上代码，可以看下，有不明白的发帖再讨论。参考了论坛某位大神的方法，然后完善了下，记不得帖子代码了。有问题的跟帖讨论。

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'))调用即可

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

huguoba · 回复于2015-11-18 09:15:12

guangli 发表于 2015-11-17 09:20
同问，这个方法咋调用。。

帖子已修改，请查看！

蔚蓝海域

本帖最后由蔚蓝海域于 2015-7-21 13:39 编辑

GetFileName漏了……

huguoba

蔚蓝海域发表于 2015-7-21 13:13
GetFileName漏了……

那是个获取文件名的函数！

蔚蓝海域

huguoba 发表于 2015-7-21 14:42
那是个获取文件名的函数！

恩，我已经自己写了……

Metro

想请问一个应用场景：应用里一些详情界面会展示很多产品图片的时候，从云数据里面查到的详情数据中的图片URL地址用上面的方法把图片缓存到本地缓存目录中后，<img>标签在显示的时候如果判断是展示URL地址的图片还是本地缓存路径的呢

章帆

请问下，你这个方法如何调用的？

guangli · 回复于2015-11-17 09:20:25

同问，这个方法咋调用。。

huguoba · 回复于2015-11-18 09:06:25

Metro 发表于 2015-8-12 23:50
想请问一个应用场景：应用里一些详情界面会展示很多产品图片的时候，从云数据里面查到的详情数据中的图片UR ...

1.系统根据url的文件名判断，如果本地的图片文件存在，则使用api.downFile下载文件
2.本地文件存在，则根据文件名过滤将网络文件名重新更换成本地的文件名，减少同文件下载的时间
3.文件保存于本地的fs://下面

huguoba · 回复于2015-11-18 09:07:06

guangli 发表于 2015-11-17 09:20
同问，这个方法咋调用。。

JS直接过滤img标签的地址，做检查！可以直接使用！