【交流分享】图片本地缓存案例,控制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)'/>

好了,具体看附件的案例

ztingjian

使用背景控制图片样式;比src灵活;
用背景控制是比较灵活，不过在一些低端的手机上滚动不会卡顿吗？

2016-04-12 16:36

mark

2016-04-11 16:54

wenju (作者)

回复张扬：

亲 download 只是适合Android和IOS

2016-01-29 12:16

张扬

http://124.232.133.74:1016/index.html
我这个啥都没显示

2016-01-29 11:35

luxxxxxxx

回复 wenju ：

好了,谢谢,原来是之前改过一次translate.png,忘记改回来了

2016-01-15 10:41

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

2016-01-15 10:37

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

另外报错了:
[ERROR] : ReferenceError: Can't find variable: load
file name:html/main/photos.html
line no:1

2016-01-15 09:50

回复 luxxxxxxx ：

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

2016-01-15 09:36

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;

麻烦帮我看一下,一直都没加载,只是显示本地的图片

2016-01-14 17:17

gaus

多谢：)

2016-01-08 13:30

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

71 个评论

目录

公告

相关问题