1. 方法一：
    function iCache(selector) {
  2.         selector.each(function(data) {
  3.                 //msg(data);
  4.                 ! function(data) {
  5.                         var url = selector.eq(data).attr("src");
  6.                         var img = this;
  7.                         var filename = GetFileName(url);
  8.                         var path = "cache://" + filename;
  9.                         var obj = api.require('fs');
  10.                         obj.exist({
  11.                                 path : path
  12.                         }, function(ret, err) {
  13.                                 //msg(ret);
  14.                                 if (ret.exist) {
  15.                                         if (ret.directory) {
  16.                                                 //api.alert({msg:'该路径指向一个文件夹'});
  17.                                         } else {
  18.                                                 //api.alert({msg:'该路径指向一个文件'});
  19.                                                 //selector.eq(data).src=path;
  20.                                                 selector.eq(data).attr('src', null);
  21.                                                 path = api.cacheDir + '/' + filename;
  22.                                                 selector.eq(data).attr('src', path);
  23.                                                 //console.log(selector.eq(data).attr("src"));
  24.                                         }
  25.                                 } else {
  26.                                         api.download({
  27.                                                 url : url,
  28.                                                 savePath : path,
  29.                                                 report : false,
  30.                                                 cache : true,
  31.                                                 allowResume : true
  32.                                         }, function(ret, err) {
  33.                                                 //msg(ret);
  34.                                                 if (ret) {
  35.                                                         var value = ('文件大小：' + ret.fileSize + '；下载进度：' + ret.percent + '；下载状态' + ret.state + '存储路径: ' + ret.savePath);
  36.                                                 } else {
  37.                                                         var value = err.msg;
  38.                                                 };
  39.                                         });
  40.                                 }
  41.                         });
  42.                 }(data);
  43.         });
  44. };

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方法

图片

  1. <img onload="imageCache(this)" data-url="{{=value.img_url}}" class="thumbnail" src="../image/zd.png">
  • 图片src必须为存在的图片，否则不会启用

    1. imageCache

    方法

  1. //列表图片缓存
  2. function imageCache(ele_){
  3.         var imageURL = $api.attr(ele_, 'data-url');
  4.         api.imageCache({
  5.             url: imageURL
  6.         }, function(ret, err){
  7.                 if(ret.status){
  8.                         ele_.src = ret.url;
  9.                         $api.removeAttr(ele_, 'data-url');
  10.                 }
  11.         });
  12. }

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

apicloud 人脸识别登录

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

img标签过滤加fs模块实现图片文件缓存的更多相关文章

  1. nodejs模块——fs模块 WriteFile写入文件

    WriteFile写入文件 使用fs.writeFile(filename,data,[options],callback)写入内容到文件. 参数说明: filename String 文件名 dat ...

  2. 使用.htaccess进行浏览器图片文件缓存

    对于图片类网站,每次打开页面都要重新下载图片,慢不说,还非常浪费流量.这时就需要用到缓存,强制浏览器缓存图片文件 缓存文件,提问网站访问数度,减少流量消耗,现提供2中缓存代码 打开.htaccess文 ...

  3. ssh整合问题总结--在添加商品模块实现图片(文件)的上传

    今天在做毕设(基于SSH的网上商城项目)中碰到了一个文件上传的需求,就是在后台管理员的商品模块中,有一个添加商品,需要将磁盘上的图片上传到tomcat保存图片的指定目录中: 完成这个功能需要两个步,第 ...

  4. 为什么Android应该根据屏幕分辨率来加载不同的图片文件

    1.图片在xxhdpi,手机是hdpi的 我们有一个手机是hdpi的.我们还有一个图片,我们把他放在xxhdpi下.当手机显示的时候,系统会去hdpi中找,发现没有图片,最终在xxhpi中找到.终于找 ...

  5. Javascript 的模块化编程及加载模块【转载+整理】

    http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 本文内容 引入 模块化 最初写法 对象写法 立即执行函数写法 放大模式 宽放 ...

  6. Android ListView 图片异步加载和图片内存缓存

    开发Android应用经常需要处理图片的加载问题.因为图片一般都是存放在服务器端,需要联网去加载,而这又是一个比较耗时的过程,所以Android中都是通过开启一个异步线程去加载.为了增加用户体验,给用 ...

  7. node的fs模块使用————node

    node的fs模块使用----node fs模块是调用文件的模块. var fs=require('fs'); //引用模块. //查看文件信息 fs.stat('index.txt',functio ...

  8. Node.js学习（1）-加载模块require('fs/http/.b/art-template')

    node.js既不是语言,也不是框架,它是一个平台 加载模块: 核心模块(require('fs/http')), 自定义模块(var bExport=require('./b'),exports.f ...

  9. 火车头dede采集接口，图片加水印，远程图片本地化，远程无后缀的无图片本地化

    <?php /* [LocoySpider] (C)2005-2010 Lewell Inc. 火车采集器 DedeCMS 5.7 UTF8 文章发布接口 Update content: 图片加 ...

随机推荐

  1. [tyvj1957 Poetize5] Vani和Cl2捉迷藏 (最小路径可重点覆盖+二分图最大匹配)

    传送门 Description 这片树林里有N座房子,M条有向道路,组成了一张有向无环图. 树林里的树非常茂密,足以遮挡视线,但是沿着道路望去,却是视野开阔.如果从房子A沿着路走下去能够到达B,那么在 ...

  2. Yii2验证码使用教程

    控制器代码 public function actions() { return [ 'captcha' => [ 'class' => 'yii\captcha\CaptchaActio ...

  3. Golang - 开篇必须吹牛逼

    目录 Golang - 开篇必须吹牛逼 Go牛逼吗 安装环境 Golang - 开篇必须吹牛逼 (1)我们为什么要学 高并发 深度 || 广度 (2)go学习思路和目标 多打多练 掌握go语言 做一个 ...

  4. jquery怎样获取多个复选框的值？

    jquery的遍历方法可以获取复选框所欲的选中值 1 2 $("input:checkbox:checked").each(function(index,element));    ...

  5. UVa 10297 - Beavergnaw

    题目:假设一个底边与高为D的圆柱切去一部分使得.剩下的中心是底边与高为d的圆柱. 和以他们底面为上下地面的圆锥台,已知切去的体积,求d. 分析:二分,计算几何.圆锥台体积公式:π*(r^2+r*R+R ...

  6. JS 滚动条事件

    当滚动条滚动到最底部出发事件: $(window).scroll(function(){ if($(document).height()-$(this).scrollTop()-$(this).hei ...

  7. luogu3111 [USACO14DEC]牛慢跑Cow Jog_Sliver

    题目大意 有N (1 <= N <= 100,000)头奶牛在一个单人的超长跑道上慢跑,每头牛的起点位置都不同.由于是单人跑道,所有他们之间不能相互超越.当一头速度快的奶牛追上另外一头奶牛 ...

  8. mybits 操作指南

    第一.一对一: <resultMap type="com.zktx.platform.entity.tb.Module" id="BaseResultMap&quo ...

  9. Jenkins project

    1.project name 这个作为git clone的target folder 2.Multiple SCMs 建立2个git类型的操作,相互独立. additional Behaviors 设 ...

  10. DNS同时占用UDP和TCP端口53——传输数据超过512时候用tcp，DNS服务器可以配置仅支持UDP查询包

    DNS同时占用UDP和TCP端口53是公认的,这种单个应用协议同时使用两种传输协议的情况在TCP/IP栈也算是个另类.但很少有人知道DNS分别在什么情况下使用这两种协议. 先简单介绍下TCP与UDP. ...