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 οnlοad="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

转载于:https://www.cnblogs.com/haonanZhang/p/6733430.html

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

nodejs01——安装及使用、服务端及客户端、commonjs规范、fs模块的使用(文件操作及目录操作)、stream、buffer、WebServer、端口、动态资源及静态资源、头信息、请求方式
nodejs的安装及使用服务端及客户端 commonjs规范 fs模块的使用(文件操作及目录操作) stream buffer // Node.js介绍 Node.js 诞生于2009年,Node. ...
php htaccess实现缓存,使用.htaccess进行浏览器图片文件缓存，_PHP教程
使用.htaccess进行浏览器图片文件缓存, 对于图片类网站,每次打开页面都要重新下载图片,慢不说,还非常浪费流量.这时就需要用到缓存,强制浏览器缓存图片文件缓存文件,提问网站访问数度,减少流量消 ...
解决IDEA加载多个项目（模块)时图片文件资源调用不出来的问题，new ImageIcon()图片相对路径加载失败的问题
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.分析问题二.解决步骤 1.采用绝对路径 2.改良相对路径前言提示:这里可以添加本文要记录的大概内容: IDE ...
vue——图片懒加载和禁止图片使用缓存方法
图片预加载: 图片预加载就是在网页全部加载之前提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就 ...
Javascript 的模块化编程及加载模块【转载+整理】
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 本文内容引入模块化最初写法对象写法立即执行函数写法放大模式宽放 ...
nodejs学习-fs模块
B站黑马nodejs node.js是一个基于Chrome V8引擎的JavaScript运行环境. 注意: 浏览器是JavaScript的前端运行环境 Node.js是JavaScript的后端运行 ...
NodeJS 之 fs 模块（路径动态拼接问题）
NodeJS 之 fs 模块(路径动态拼接问题) 参考描述问题描述准备工作 content.txt main.js 复现前奏惊雷再探分析解决 __dirname path 模块 pa ...
vue脚手架图片懒加载模块和样式穿透
1.vue样式穿透 vue样式穿透:在样式隔离的前提下,在父组件中修改子组件样式正常情况下,在样式隔离的前提下,父标签不能修改子组件样式.如果想修改子组件样式,使用样式穿透 1.1 样式穿透语法结构 ...
img标签图片加载失败显示图片
img标签图片加载失败显示图片 onerror="οnerrοr=null;src='../../image/community/initialize_img.png'"
load方法引入本地html报错,分享基于plus.downloader的图片懒加载功能，支持本地缓存v1.1.0...
今天试用了下hello mui上的图片懒加载功能,发现有些地方还无法满足我的需求,ajax动态加载的时候无法实现懒加载. 然后又看了下36kr的示例,因为代码关系实在太多了,耦合度比较高,遂自己动手写 ...

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

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

最新文章

热门文章