【交流分享】图片本地缓存案例,控制downloader数量,避免手机发烫

之前有写过<<h5+的Downloader下载网络图片缓存到本地的案例>> http://ask.dcloud.net.cn/article/256
但后来才发现图片比较多时,downloader创建过多,手机立马发烫;
后来解决了也没有更新;
今天项目刚发出去,稳定下来;现在重新整理了一个案例分享给大家;

主要优化和解决的问题:
1.图片显示,先检查本地是否存在,如果存在则使用本地;如果不存在则联网下载,保存在本地
2.使用背景控制图片样式;比src灵活;
3.不同的场景,使用不同的图片下载默认图;(我项目中头像和产品的下载默认图是不一样的)
4.单个downloader下载,避免网速快或图片多创建过多downloader,导致手机发烫的问题
5.避免任务队列中,图片已存在,downloader下载卡顿的问题
6. 加入下载完成的渐变动画,
7. 其他,,自己发现..

使用方法很简单:两步!!!
1.导入imgload.css imgload.js md5.min.js 还有一张透明图translate.png
2.联网获取数据后,拼接的img格式为:<img sr c='默认图片' data-sr c='网络地址' onload='load(this)'/>

好了,具体看附件的案例


34 分享
五块钱的果汁 DCloud_heavensoft 不知道 蔡繁荣 Nation lafer hilongjw hyz 针眼画师 后海 立扬 訫 luxxxxxxx 老贪嗔痴 holy1004 小易xiaoyi 512973585@qq.com CFee 我就是那个男孩 630145833@qq.com HSQ2025 好冷 MooGu 8966092@163.com freedemon 715527816@qq.com 韩德宇 a85469282@gmail.com 841196685@qq.com koly_xjy@126.com liushisheng@outlook.com 1156565863@qq.com lhyh 星羽
小和尚ABC

小和尚ABC 回复 luxxxxxxx

我的也是,你解决了吗?
0 赞 2017-07-17 11:00
18982298622@189.cn

18982298622@189.cn

ios下第一次运行程序下载了图片,然后杀掉进程,重开,又会下载一次
0 赞 2017-05-10 11:21
wen如故i

wen如故i

头像缓存下来,一开始联网也会,,但是点击当前页面的打开的webview,返回时会卡顿,硬件加速也木有用,
0 赞 2017-04-10 11:11
4111500976

4111500976

为什么我运行你的dome,会执行3次下载操作,好像是频繁操作innerHTML造成的。
0 赞 2017-03-02 13:50
小丸子2333

小丸子2333

楼主 android下载方式和ios下载文件的方式不一样吗 为什么ios启动任务调的监听返回的status是null呢 咋办
0 赞 2016-09-29 14:17
雷小达

雷小达

mark
0 赞 2016-09-17 20:15
qixi

qixi

mark
0 赞 2016-09-17 16:34
630145833@qq.com

630145833@qq.com

楼主,在IOS手机里无法检测到图片已经存在,明明图片已经存在了,还是会重新下载,咋办
0 赞 2016-09-01 19:57
好冷

好冷

好东西,收藏了
0 赞 2016-07-29 22:39
wenju

wenju 回复 动软网络

官方download的问题,更新一下看看是否已解决
0 赞 2016-05-11 08:58
wenju

wenju 回复 陶妖兽

今天官方又更新了版本,修复了下载异常.. 闪退不是方案的问题啦..
0 赞 2016-05-11 08:57
陶妖兽

陶妖兽

用最新的SDK使用你的方案就会闪退,用之前我们使用的稳定版本,就木有问题
0 赞 2016-05-10 11:43
陶妖兽

陶妖兽

用了你的方案出现了闪退~~~orz
0 赞 2016-05-10 08:59
动软网络

动软网络

网络图片路径中包含中文,控制台显示回调400,但却下载下来了
0 赞 2016-04-28 11:21
peter_yu

peter_yu

你好,我问个问题。我现在的应用是有个离线点读课件的app.APP既支持在线点读,又支持离线点读。
离线点读我的方案是: 从服务器下载一个包含html,js,css,图片文件,音频文件的压缩文件。
我看了一下已经下载下来。下载的路径为_downloads/7.zip。
下载完后解压,到_downloads/7目录下。


然后在往websql中记录一条记录去记录下载的课件信息。

然后展现,供离线点读。

离线点读的方案是我打开_downloads/7/diandu.html

然后里面的各种图片,mp3资源都在zip里面。都为相对路径访问


我不知道我这种方案能否实现。

多谢。

我现在遇到的问题是解压的时候报错了。
日志是这样的
链接到服务器... at html/studytool/diandu_list.html:255
Download success: _downloads/7.zip at html/studytool/diandu_list.html:230
下载完成! at html/studytool/diandu_list.html:261
46738303 at html/studytool/diandu_list.html:262

文件都已经存在了。报下面的错误
Compress error!{"code":2,"message":"open failed: EINVAL (Invalid argument)"}
plus.zip.decompress("_downloads/7.zip", "_downloads/",
function() {
alert("Decompress success!");
},
function(error) {
console.log("Compress error!" + JSON.stringify(error));
});
0 赞 2016-04-22 13:51
ztingjian

ztingjian 回复 wenju

明白,谢谢
0 赞 2016-04-18 11:20
wenju

wenju 回复 ztingjian

这个图片轮播是新的webview 然后里面是mui的轮播 哈哈
0 赞 2016-04-15 09:24
kjjj

kjjj

真棒,感谢wenju的分享
0 赞 2016-04-13 22:40
ztingjian

ztingjian 回复 wenju

你写的图片轮播预览 可以分享下吗?
0 赞 2016-04-12 17:07
wenju

wenju 回复 ztingjian

src和背景 对性能有影响的吗 这个确实没有研究过哦
0 赞 2016-04-12 16:55
ztingjian

ztingjian

使用背景控制图片样式;比src灵活;
用背景控制是比较灵活,不过在一些低端的手机上滚动不会卡顿吗?
0 赞 2016-04-12 16:36
ztingjian

ztingjian

mark
0 赞 2016-04-11 16:54
wenju

wenju 回复 张扬

亲 download 只是适合Android和IOS
0 赞 2016-01-29 12:16
张扬

张扬

http://124.232.133.74:1016/index.html
我这个啥都没显示
0 赞 2016-01-29 11:35
luxxxxxxx

luxxxxxxx 回复 wenju

好了,谢谢,原来是之前改过一次translate.png,忘记改回来了
1 赞 2016-01-15 10:41
luxxxxxxx

luxxxxxxx 回复 wenju

刚仔细看了下代码,有个地方引用的时候少些了个>
现在能调到数据了,就是还是没有显示出来
[LOG] : 从任务集合中取一个任务==_downloads/image/a1b334efc5ffb08e50368fd7575a7758.jpg
[LOG] : 下载回调status==200-->_downloads/image/a1b334efc5ffb08e50368fd7575a7758.jpg
[LOG] : 从任务集合中取一个任务==_downloads/image/20a6aa052b34b9706605c0b53996ef26.jpg
[LOG] : 下载回调status==200-->_downloads/image/20a6aa052b34b9706605c0b53996ef26.jpg
0 赞 2016-01-15 10:37
luxxxxxxx

luxxxxxxx 回复 wenju

只显示adnew1图片,照片标题photoTitle 显示都是正确的.
用console.log输出,photoTitle和photoURL也都是正确的,好像没有执行懒加载.

另外报错了:
[ERROR] : ReferenceError: Can't find variable: load
file name:html/main/photos.html
line no:1
0 赞 2016-01-15 09:50
wenju

wenju 回复 luxxxxxxx

显示本地的图片是指只显示adnew1.jpg还是说只显示本地缓存的图呢;这些也很容易调试,debug看看load是否执行了就知道啦;不会debug就输出一下呗; 也有可能load函数其他js已经有了??
0 赞 2016-01-15 09:36
luxxxxxxx

luxxxxxxx 回复 wenju

mui.ajax('http://192.168.2.26:8027/jsonp.ashx', {
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型//{"dt":{"data":[{"id":"461","albumid":"29","title":"坝上晨韵","content":"","bpic":"http://www.ttcy.cn/ttcy/images/Album_Picture/Picture/201322517535250B
success: function(message) {
//获得服务器响应
var newData = JSON.stringify(message);
newData = eval('(' + newData + ')'); //转为json对象
var dataArr = newData.dt.data;
console.log(dataArr);
var photoURL = "";
var photoTitle = "";
var productList = document.getElementById("_ul");
var content = "";

for (var i = 0, len = dataArr.length; i < len; i++) {
photoTitle = dataArr[i].title;
photoURL = dataArr[i].pic;
// 第一行采用双引号包裹,是因为对象序列化以后,里面采用的是"",如果data-detail属性外面依旧用"",转义会出问题
content += "<li class='mui-table-view-cell mui-media mui-col-xs-6'>" +
'<img style="height:120px" src="../../image/adnew1.jpg" data-src="' + photoURL + '" data-preview-group="1" onload="load(this)">' +
'<div class="mui-media-body">' + photoTitle + '</div></li>';
}
productList.innerHTML = content;


麻烦帮我看一下,一直都没加载,只是显示本地的图片
0 赞 2016-01-14 17:17
gaus

gaus 回复 wenju

多谢:)
0 赞 2016-01-08 13:30
wenju

wenju 回复 gaus

mui image preview用过一次 因为在安卓机 比如小米和三星系列的 有问题 就摒弃了 ; 冲突的话 确实没有特别的研究; 现在的图片轮播预览是自己写的
1 赞 2016-01-08 09:21
gaus

gaus

@wenju

一个小问题,如果同时引入mui image preview,则图像第1次无法正确显示,第2次再进入则完全正常,似乎第1次load未完成就显示了部分图片。不知这二者是否有冲突?
0 赞 2016-01-08 09:02
mingwei

mingwei

挺好的呀,正需要呢 试试
感觉没问题
0 赞 2015-12-24 21:12
苏禾然

苏禾然

赞赞赞
0 赞 2015-12-09 19:56
TTang

TTang 回复 wenju

我已经找到问题所在了,因为我在导包的时候导入的是最新版本的两个jar包,然而我之前用的今年2月份发布的版本,缺少了一个基础包,然而我把缺的那个基础包导进去的时候就报包冲突的错误,我只能找回我最原始版本那些SDK中的那两个jar包放进去就没有问题了,这只能怪mui新版不兼容旧版本
1 赞 2015-12-09 14:34
TTang

TTang

not found file feature plugin ; action=convertLocalFileSystemURL;请检查assets/data/properties.xml文件是否添加file相关节点。或者not found downloader feature plugin ; action=createDownload;请检查assets/data/properties.xml文件是否添加downloader相关节点。一直报这两个错,但是我明明在properties已经存在的了。你写的都有
0 赞 2015-12-08 10:17
wenju

wenju 回复 TTang

你这是集成Android原生吧 确定是报节点错误吗? 如果是的话 downloader有两个节点的
features中的一个
<feature
name="Downloader"
value="io.dcloud.net.DownloaderFeatureImpl" >
</feature>
services中一个
<services>

<service
name="Downloader"
value="io.dcloud.net.DownloaderBootImpl" />
</services>
0 赞 2015-12-08 09:29
TTang

TTang

downloader.jar file.jar 这两个导入后一直说找不到节点,我都已经配置好properties了
0 赞 2015-12-07 17:28
wenju

wenju 回复 Aooooooy

这个不适合img预先写在body 因为此时plus还未初始化 请在js中调用onload
0 赞 2015-11-13 09:22
Aooooooy

Aooooooy

写好的<img>调用load就会显示plus的错误 Uncaught ReferenceError: load is not defined
0 赞 2015-11-12 10:51
wenju

wenju

不好意思 各位最近忙着赶项目 暂时没法回答各位的问题 @villayong @purple 如有解决的 可分享给大家
0 赞 2015-10-14 10:47
purple

purple

现在是保存到了/storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/downloads/image/路径下, 通过手机的文件管理找不到这个目录, 如何变更目录?
0 赞 2015-10-13 13:55
炸鸡排超人

炸鸡排超人

我用的是angular的,想着写一个ng-cache-src指令,加个storage应当也是够用了
downloader模块我本身写好线程数了= =问题不大
你说的默认图是没图的时候展示么, 那我写个attr(default-src)在element上也是可行的
还有什么问题呢,不知道了= =先去写写
0 赞 2015-10-09 13:24
villayong

villayong 回复 wenju

嗯,是没有问题,是我的png图片跟我的样式有冲突

还有个问题,想增加一个清除缓存的算法,但现在不知道如何计算sd卡的剩余空间大小,以及已经下载的所有图片总空间,看了下h5的接口,好像没有计算一个文件夹的大小,只有计算某个文件的大小,请问知道如何获取吗?
0 赞 2015-10-09 10:13
wenju

wenju 回复 villayong

亲 这个和图片格式没有关系的哦 我刚刚测试了 Android上无此问题哈 ; 如果确实您这边有问题 可以发个png网络地址给大家试试
0 赞 2015-10-09 10:04
villayong

villayong

多谢分享!!
有个问题,如果是Android平台,png格式的图片无法显示,ios平台无此问题,希望改进!
0 赞 2015-10-08 16:49
wenju

wenju 回复 水御双氛

此问题官方已经解决的了 你升级下最新版本hb和mui.js mui.css
0 赞 2015-09-29 14:14
wenju

wenju 回复 水御双氛

http://ask.dcloud.net.cn/question/10547
0 赞 2015-09-29 14:10
水御双氛

水御双氛

ios可以,米4的情况,plus报Uncaught SyntaxError: Unexpected token } 查出来是plus.downloader.createDownload这一句代码有问题
0 赞 2015-09-29 09:45
wenju

wenju 回复 木乃森

能帮到你就太好了 O(∩_∩)O~
0 赞 2015-09-24 10:28
木乃森

木乃森 回复 wenju

明白了,我本来想的是,如果本地没有文件的话,图片src就设置上线上地址。我的逻辑有点混乱了,现在明白了
0 赞 2015-09-24 10:25
wenju

wenju 回复 木乃森

检查本地是否存在 读的是本地文件 和网络无关系呢; 如果正在下载图,断网了,我设置的downloader会重试2次,超时10秒
0 赞 2015-09-24 09:56
木乃森

木乃森

有个问题,如果在断网状态,图片的onerror事件会不会重复执行。
0 赞 2015-09-24 09:50
木乃森

木乃森

多谢分享,借鉴了很多地方!
0 赞 2015-09-24 09:41
wenju

wenju

代码已更新 下载的请更新一下
1 赞 2015-09-21 09:21
wenju

wenju

@水御双氛 谢谢提醒 我的错 应该是download.abort(); 下载失败取消任务 删除本地文件
0 赞 2015-09-21 09:09
水御双氛

水御双氛

dtask.abort();这一句中dtask代表什么,单看源码貌似是undefined?
0 赞 2015-09-21 07:25
倾听

倾听

很不错的东东,学习了
0 赞 2015-09-19 15:51
stock2

stock2

谢谢分享
0 赞 2015-09-19 09:30
炸鸡排超人

炸鸡排超人

谢@.迟点来看
0 赞 2015-09-18 17:08
wenju

wenju

特别注意的地方:
第一次使用,请检查imgload.js中第一行的translate.png路径是否和你项目的一致
比如是不是images/translate.png或者../images/translate.png
1 赞 2015-09-18 15:00

要回复文章请先登录注册