apicloud apicloud

注册
查看: 8633|回复: 18

[APP开发技巧] img标签过滤加fs模块实现图片文件缓存

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

[APP开发技巧] img标签过滤加fs模块实现图片文件缓存

8633 18 | 发表于 2015-7-21 12:38:21 |阅读模式 | |
本帖最后由 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'))调用即可

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





业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

 楼主| 发表于 2015-11-18 09:15:12 |
guangli 发表于 2015-11-17 09:20
同问,这个方法咋调用。。

帖子已修改,请查看!

主题:
24
帖子:
97
云币:
216
发表于 2015-7-21 13:13:13 |
本帖最后由 蔚蓝海域 于 2015-7-21 13:39 编辑

GetFileName漏了……

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

 楼主| 发表于 2015-7-21 14:42:33 |

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

主题:
24
帖子:
97
云币:
216
发表于 2015-7-21 17:18:05 |
huguoba 发表于 2015-7-21 14:42
那是个获取文件名的函数!

恩,我已经自己写了……

实习司机

UID:16672

主题:
42
帖子:
188
云币:
490
发表于 2015-8-12 23:50:05 |
想请问一个应用场景:应用里一些详情界面会展示很多产品图片的时候,从云数据里面查到的详情数据中的图片URL地址用上面的方法把图片缓存到本地缓存目录中后,<img>标签在显示的时候如果判断是展示URL地址的图片还是本地缓存路径的呢

驾校小白

UID:58829

主题:
5
帖子:
12
云币:
69
发表于 2015-8-29 15:42:14 |
请问下,你这个方法如何调用的?

新手上路

UID:83098

主题:
0
帖子:
1
云币:
18
发表于 2015-11-17 09:20:25 |
同问,这个方法咋调用。。

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

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

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

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

 楼主| 发表于 2015-11-18 09:07:06 |
guangli 发表于 2015-11-17 09:20
同问,这个方法咋调用。。

JS直接过滤img标签的地址,做检查!可以直接使用!
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表