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 onload="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
img标签过滤加fs模块实现图片文件缓存的更多相关文章
- nodejs模块——fs模块 WriteFile写入文件
WriteFile写入文件 使用fs.writeFile(filename,data,[options],callback)写入内容到文件. 参数说明: filename String 文件名 dat ...
- 使用.htaccess进行浏览器图片文件缓存
对于图片类网站,每次打开页面都要重新下载图片,慢不说,还非常浪费流量.这时就需要用到缓存,强制浏览器缓存图片文件 缓存文件,提问网站访问数度,减少流量消耗,现提供2中缓存代码 打开.htaccess文 ...
- ssh整合问题总结--在添加商品模块实现图片(文件)的上传
今天在做毕设(基于SSH的网上商城项目)中碰到了一个文件上传的需求,就是在后台管理员的商品模块中,有一个添加商品,需要将磁盘上的图片上传到tomcat保存图片的指定目录中: 完成这个功能需要两个步,第 ...
- 为什么Android应该根据屏幕分辨率来加载不同的图片文件
1.图片在xxhdpi,手机是hdpi的 我们有一个手机是hdpi的.我们还有一个图片,我们把他放在xxhdpi下.当手机显示的时候,系统会去hdpi中找,发现没有图片,最终在xxhpi中找到.终于找 ...
- Javascript 的模块化编程及加载模块【转载+整理】
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 本文内容 引入 模块化 最初写法 对象写法 立即执行函数写法 放大模式 宽放 ...
- Android ListView 图片异步加载和图片内存缓存
开发Android应用经常需要处理图片的加载问题.因为图片一般都是存放在服务器端,需要联网去加载,而这又是一个比较耗时的过程,所以Android中都是通过开启一个异步线程去加载.为了增加用户体验,给用 ...
- node的fs模块使用————node
node的fs模块使用----node fs模块是调用文件的模块. var fs=require('fs'); //引用模块. //查看文件信息 fs.stat('index.txt',functio ...
- Node.js学习(1)-加载模块require('fs/http/.b/art-template')
node.js既不是语言,也不是框架,它是一个平台 加载模块: 核心模块(require('fs/http')), 自定义模块(var bExport=require('./b'),exports.f ...
- 火车头dede采集接口,图片加水印,远程图片本地化,远程无后缀的无图片本地化
<?php /* [LocoySpider] (C)2005-2010 Lewell Inc. 火车采集器 DedeCMS 5.7 UTF8 文章发布接口 Update content: 图片加 ...
随机推荐
- 配置Master与Slave实现主从同步
Mysql版本 通过docker启动的mysql容器 mysql版本 root@1651d1cab219:/# mysql --version mysql Ver 14.14 Distrib 5.6. ...
- Java设计模式之 — 适配器(Adapter)
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9400141 今天一大早,你的leader就匆匆忙忙跑过来找到你:“快,快,紧急任务 ...
- VS2015 C++ 获取 Edit Control 控件的文本内容,以及把获取到的CString类型的内容转换为 int 型
UpdateData(true); //读取编辑框内容,只要建立好控件变量后调用这个函数使能,系统就会自动把内容存在变量里 //这里我给 Edit Control 控件创建了一个CString类型.V ...
- Tomcat日志配置远程Syslog采集
http://blog.csdn.net/leizi191110211/article/details/51593748
- Java深入 - Filter过滤器
Java的1.3開始,对servlet2.3规范中增加了过滤器的支持.过滤器可以让我们对目标资源的请求和响应进行截取. 一些filter的特性: 1. Filter是Servlet规范的规定,须要Se ...
- POJ 2553 The Bottom of a Graph(强连通分量)
POJ 2553 The Bottom of a Graph 题目链接 题意:给定一个有向图,求出度为0的强连通分量 思路:缩点搞就可以 代码: #include <cstdio> #in ...
- Android的编译环境--Build系统【转】
本文转载自:http://blog.csdn.net/kitty_landon/article/details/60764232 Android是一个庞大的系统,包含太多的模块,各种模块的类型也有10 ...
- EOJ 2822 内存显示
一个 int 类型变量或 double 类型变量在连续几个字节的内存中存放.读取数值时,当数值中包含小数点时类型为 double,否则类型为 int.将读入的数值存放在 int 类型变量或 doubl ...
- 搭建自己的websocket server_1
用Node.js实现一个WebSocket的Server. https://github.com/sitegui/nodejs-websocket#event-errorerr nodejs-we ...
- etcd创建集群并增加节点
下载安装 从这下载https://github.com/coreos/etcd/releases/download/v3.3.2/etcd-v3.3.2-linux-amd64.tar.gz tar ...