apicloud apicloud

注册
查看: 6566|回复: 11

[开发工具] 分享 图片缓存的解决方案以及代码,欢迎拍砖!

驾校小白

UID:269398

主题:
1
帖子:
1
云币:
31

[开发工具] 分享 图片缓存的解决方案以及代码,欢迎拍砖!

6566 11 | 发表于 2016-2-26 13:09:08 |阅读模式 | |
本帖最后由 Full 于 2016-3-9 16:13 编辑

接触了apicloud几天了,一直在瞎转,犹豫不决,是否采用,就当是随便学习一下吧。考虑到项目中会用到在线图片较多,一个必须解决的问题就是图片缓存。少说废话,正题
方案:首次加载时,从网络上下载,以后每次需要同样的图片就从本地缓存里直接取,有的模块听前辈们说有自动缓存,可以略过。
缓存在fs://images下面
用到 jquery,jquery.md5,没有这两文件的同学网上下载。
api框架下主要用到的就是fs模块,用到的api方法有:api.download
md5 主要是为了把图片的url编码成一个方便存的文件名,可以用别的方法。
过程是异步进行的,图片加载完一个,再下载下一个,所以首次加载时是一次加载显示的,后面基本上是感觉不到这个顺序。
此方法也可以用于其它资源的缓存,同时也可以考虑是否加密。

先上代码:

  1.         function _zyzImgCache(){
  2.                 var imgDir = "fs://images/";
  3.                 var srcs = $("img.imgCache");

  4.                 if(srcs.length > 0){
  5.                     var imgObj = $("img.imgCache").first();
  6.                         var imgUrl = imgObj.attr("srcs");
  7.                         var imgMd5 = $.md5(imgUrl);

  8.                         var fs = api.require('fs');
  9.                         fs.exist({
  10.                             path: imgDir + imgMd5
  11.                         },function(ret,err){
  12.                             if(ret.exist){
  13.                                 imgObj.attr("src",api.fsDir+"/images/"+imgMd5);
  14.                                 imgObj.removeClass("imgCache");
  15.                                 _zyzImgCache();
  16.                             }else {
  17.                                     api.download({
  18.                                             url : imgUrl,
  19.                                             savePath : imgDir+imgMd5,
  20.                                             report : false,
  21.                                             cache : true,
  22.                                             allowResume : true
  23.                                         }, function(ret, err) {
  24.                                             if (ret) {
  25.                                                     imgObj.attr("src",ret.savePath);
  26.                                                     imgObj.removeClass("imgCache");
  27.                                                     _zyzImgCache();
  28.                                             } else {
  29.                                                 var value = err.msg;
  30.                                             };
  31.                                     });
  32.                             }
  33.                         });                        
  34.                 }
  35.         }
复制代码

如果引用呢:
  1.     <div><img src="" width="100" height="100" id="picture" class="abc imgCache" srcs="http://a.hiphotos.baidu.com/image/w%3D400/sign=2abe1c77d4ca7bcb7d7bc62f8e086b3f/64380cd7912397ddf9f4bdb05a82b2b7d1a287f0.jpg"/></div>

  2.     <div><img src="" width="100" height="100" id="picture1" class="imgCache" srcs="http://www.jb51.net/images/logo.gif"/></div>
复制代码

img 的标签加上 class="imgCache"   img的url放在:srcs 上面
在ajax加载完html数据后  直接执行函数就可以了。 _zyzImgCache()

好了,如果大家有更好的建议,一起完善。

2

查看全部评分

驾校小白

UID:213613

主题:
2
帖子:
16
云币:
281
发表于 2016-7-6 12:12:44 |
本帖最后由 袁小溅 于 2016-7-6 12:13 编辑
  1. function IMGcache() {
  2.             var imgDir = "fs://images/";
  3.             var srcs = $("img.imgCache");
  4.             if (srcs.length > 0) {
  5.                 var imgObj = $("img.imgCache").first();
  6.                 var imgUrl = imgObj.attr("srcs");
  7.                 var imgSha1 = hex_sha1(imgUrl);
  8.                 if ($api.getStorage("imgcache" + imgSha1) == undefined) {
  9.                     api.download({
  10.                         url : imgUrl,
  11.                         savePath : imgDir + imgSha1 + '.png',
  12.                         cache : false,
  13.                         allowResume : true
  14.                     }, function(ret, err) {
  15.                         if (ret.state == 1) {
  16.                             var trans = api.require('trans');
  17.                             trans.decodeImgToBase64({
  18.                                 imgPath : ret.savePath
  19.                             }, function(ret1, err1) {
  20.                                 if (ret1.status) {
  21.                                     imgObj.attr("src", "data:image/png;base64," + ret1.base64Str);
  22.                                     imgObj.removeClass("imgCache");
  23.                                     $api.setStorage("imgcache" + imgSha1, "data:image/png;base64," + ret1.base64Str);
  24.                                     IMGcache();
  25.                                 } else {
  26.                                     api.alert({
  27.                                         msg : err1.msg
  28.                                     });
  29.                                 }
  30.                             });
  31.                         } else {
  32.                             IMGcache();
  33.                         }
  34.                     });
  35.                 } else {
  36.                     imgObj.attr("src", $api.getStorage("imgcache" + imgSha1));
  37.                     imgObj.removeClass("imgCache");
  38.                     IMGcache();
  39.                 }
  40.             }
  41.         }
复制代码
APICLOUD用到的模块:trans 、 fs

楼主的方法其实和系统自带的api.imageCache一样,都是在本地存了个缓存文件,没有后缀,我遇到个问题就是直接调用,src显示不出图片,所以我改编了下,本地存了base64格式,这就通用所有机型了,方法见附的代码,引用和楼主的一样,img 的标签加上 class="imgCache"
1

查看全部评分

实习司机

UID:232326

主题:
29
帖子:
158
云币:
397
发表于 2016-3-21 13:36:22 |
好用,

实习司机

UID:232326

主题:
29
帖子:
158
云币:
397
发表于 2016-3-21 13:36:26 |
好用,

主题:
19
帖子:
85
云币:
142
发表于 2016-6-22 14:56:04 |
用楼主这个方法改了一个加载序列图片的,好用!谢谢分享

主题:
28
帖子:
75
云币:
150
发表于 2016-8-2 10:29:40 |
让爱永恒 发表于 2016-6-22 14:56
用楼主这个方法改了一个加载序列图片的,好用!谢谢分享

我这个用他的方法为什么每次还是重新加载  什么情况啊

主题:
19
帖子:
85
云币:
142
发表于 2016-8-2 11:03:33 |
馄饨馅饼 发表于 2016-8-2 10:29
我这个用他的方法为什么每次还是重新加载  什么情况啊

你最好把代码贴出来,让大拿们给瞅瞅

主题:
28
帖子:
75
云币:
150
发表于 2016-8-2 11:07:46 |
//第六步图片缓存
                function IMGcache() {
                        var imgDir = "fs://images/";   //fs模块
                       
                        var srcs = $("img.imgCache");
                        if (srcs.length > 0) {
                            var imgObj = $("img.imgCache").first();
                            
                            var imgUrl = imgObj.attr("srcs");
                            alert(imgUrl);
                            var imgSha1 = hex_sha1(imgUrl);
                            if ($api.getStorage("imgcache" + imgSha1) == undefined) {
                                api.download({
                                    url : imgUrl,
                                    savePath : imgDir + imgSha1 + '.png',
                                    cache : false,
                                    allowResume : true
                                }, function(ret, err) {
                                    if (ret.state == 1) {
                                        var trans = api.require('trans');
                                        trans.decodeImgToBase64({
                                            imgPath : ret.savePath
                                        }, function(ret1, err1) {
                                            if (ret1.status) {
                                                imgObj.attr("src", "data:image/png;base64," + ret1.base64Str);
                                                imgObj.removeClass("imgCache");
                                                $api.setStorage("imgcache" + imgSha1, "data:image/png;base64," + ret1.base64Str);
                                                IMGcache();
                                            } else {
                                                api.alert({
                                                    msg : err1.msg
                                                });
                                            }
                                        });
                                        
                                    } else {
                                        IMGcache();
                                    }
                                });
                            } else {
                                imgObj.attr("src", $api.getStorage("imgcache" + imgSha1));
                                imgObj.removeClass("imgCache");
                                    IMGcache();
                                }
                            }
                        }
QQ截图20160802110657.png

主题:
28
帖子:
75
云币:
150
发表于 2016-8-2 11:08:50 |
下面的图是我在手机端页面上显示的  上面是他的代码   我要怎么结合上啊  现在脑袋全是浆糊里   求大神帮忙解决一下吧  拜托拜托

驾校小白

UID:213613

主题:
2
帖子:
16
云币:
281
发表于 2016-11-28 10:52:34 |
馄饨馅饼 发表于 2016-8-2 11:08
下面的图是我在手机端页面上显示的  上面是他的代码   我要怎么结合上啊  现在脑袋全是浆糊里   求大神帮忙 ...

引用trans 、 fs模块,然后<img class="imgCache" srcs=""+_DOMIN_+"">
只要在img标签上加上class="imgCache",src换成srcs。你的drawList方法最后再调用下IMGcache() ;
12下一页
您需要登录后才可以回帖 登录 | 立即注册

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