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

分类：HTML5+

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

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

加入下载完成的渐变动画,
其他,,自己发现..

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

好了,具体看附件的案例

2***@qq.com

回复 wenju ：

https://ask.dcloud.net.cn/question/177970

2023-09-10 09:22

j***@gmail.com

mark

2021-01-11 09:45

f***@yeah.net

解决了我的大问题，感谢楼主无私奉献

2019-08-01 14:44

1***@qq.com

特别好，MARK！

2018-10-30 11:44

骇浪

2018-06-17 12:13

wenju (作者)

回复 2***@qq.com ：

https://ask.dcloud.net.cn/article/166

2018-05-07 14:49

有个疑惑
if (!isStartTask) {
isStartTask = true;
startTask();
}
开始isStartTask默认是false，第一个可以下载，那么第一个下载完成后，应该把isStartTask设置成false，每次下载完成都应该把isStartTask设置成false，我看到function startTask() {
if (taskArr.length == 0) {
isStartTask = false;
return;
}
作者是想，任务数为0就改成false；可是任务数是在之后才删除的
//从任务集合中取一个任务
var obj = taskArr.shift();//删除并返回数组的第一个元素
我的意思是当第一个下载完成，isStartTask其实还是true，没法往下执行

2018-05-07 11:56

其实，非常感谢作者，其实我一直也想做图片本地缓存，但是，思路一直想不明白要怎么做，看了作者的案例，才恍然大悟，截取网络路径的最后一个字段即自文件名，来拼接一个（下载图片的默认路径）本地文件的路径。然后如果能读取到文件，说明是本地有的，如果读取不到则说明需要下载。有了这个思路，其实用vue来做更加方便，不需要使用id来设置图片的src，如果本地有图片，我只需要把这个图片的本地路径添加到一个数组，即可在视图展示。如果想删除图片，把数组中的图片路径传过来，即可进行删除本地的文件。自己分析了一下，用vue其实省很多代码。有一个其他的缓存问题。我们知道安卓是由本地数据库的，如果没有网络，他们是可以正常打开APP获取本地数据库的缓存的数据，但是5+好像并没有封装读取操作本地数据。所以一旦手机没有网络，打开app是没有数据的。请教一下作者有没有这方面的高见呢？先谢谢了~

2018-05-07 11:28

回复 Lspring ：

两年前写的文章了,经历了这么久,后来发觉其实没有必要下载图片缓存本地,因为Webview本身也有缓存,而且现在图片云服务器也很给力,再退一步来说,没有网络或者网络比较慢,浏览APP其他非图片数据体验也很差的哇,现在4G网络很好的了,只要后台图片优化好,前端展示图片也是很快的
所以你现在用vue的话可以这样写
<img v-for="imgpath in imgArr" :src="imgpath " onload="inOpacity(this)" onerror="this.src='默认图地址'"/>

/*渐显 opacity*/
function inOpacity(imgObj_id){
var imgDom = (typeof imgObj_id == "object") ? imgObj_id : document.getElementById(imgObj_id);
imgDom.classList.add("anim_opacity"); //渐变动画
}

2017-09-11 11:06

Lspring

多谢分享，我现在有个问题。项目中用到vue框架，然后用v-for循环来显示多张图片，用了你的onload="load(this)" 方法，每次都报错说在plusReady后调用，然后我又在vue里根据生命周期等dom渲染完毕后去调用onload方法，但是只有v-for里面的一个Img，而不是循环的每个图片标签，这个怎么解决呀？

2017-09-11 10:24

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

71 个评论

目录

公告

相关问题