图片本地缓存

图片懒加载是通过判断http图片文件是否存在你的本地，如果未存在会将图片缓存到本地，如果已经存在就不做缓存，使用到的技术md5加密，mui、html5+.

应客户的要求，需要做懒加载，本人也找了一段时间才找到这个代码，因为是异步加载的，为了配合mui，我添加了mui的初始化代码，才可以操作plus，否则会报错

/** * 图片懒加载 * @param {Object} obj DOMElement * @param {Function} callback 加载完成回调函数 * * @author fanrong33 * @version 1.1.0 build 20160107 */ function lazyload(obj, callback){ mui.plusReady(function(){ var debug = false; // 默认打印调试日志 if(obj.getAttribute('data-loaded')){ return; } var image_url = obj.getAttribute('data-lazyload'); debug && console.log(image_url); // 1. 转换网络图片地址为本地缓存图片路径，判断该图片是否存在本地缓存 // http://...jpg -> md5 // 缓存目录 _downloads/image/(md5).jpg var image_md5 = md5(image_url); var local_image_url = '_downloads/image/'+image_md5+'.jpg'; // 缓存本地图片url var absolute_image_path = plus.io.convertLocalFileSystemURL(local_image_url); // 平台绝对路径 // alert(absolute_image_path); // alert(local_image_url); // alert(image_md5); // new temp_img 用于判断图片文件是否存在 var temp_img = new Image(); temp_img.src = absolute_image_path; temp_img.onload = function(){ debug && console.log('存在本地缓存图片文件'+local_image_url+'，直接显示'); // 1.1 存在，则直接显示（本地已缓存，不需要淡入动画） obj.setAttribute('src', absolute_image_path); obj.setAttribute('data-loaded', true); obj.classList.add('img-lazyload'); callback && callback(); return; } temp_img.onerror = function(){ debug && console.log('不存在本地缓存图片文件'); // 1.2 下载图片缓存到本地 debug && console.log('开始下载图片'+image_url+' 缓存到本地: '+local_image_url); function download_img(){ var download_task = plus.downloader.createDownload(image_url, { filename: local_image_url // filename:下载任务在本地保存的文件路径 }, function(download, status) { if(status != 200){ // 下载失败,删除本地临时文件 debug && console.log('下载失败,status'+status); if(local_image_url != null){ plus.io.resolveLocalFileSystemURL(local_image_url, function(entry) { entry.remove(function(entry) { debug && console.log("临时文件删除成功" + local_image_url); // 重新下载图片 download_img(); }, function(e) { debug && console.log("临时文件删除失败" + local_image_url); }); }); } }else{ // 把下载成功的图片显示 // 将本地URL路径转换成平台绝对路径 obj.setAttribute('src', plus.io.convertLocalFileSystemURL(local_image_url)); obj.setAttribute('data-loaded', true); obj.classList.add('img-lazyload'); callback && callback(); } }); download_task.start(); } download_img(); } }); }

html代码

list_item += '<div class="product-goods-img"><img src="img/libai.jpg" data-lazyload="'+data['floorList'][i]['productList'][j]['ImageUrl']+'" onload="lazyload(this)" /></div>';

这个项目是我一年之前做的，那时是通过拼接字符串，然后append进去，如果是用vue或者angular就不用拼接了，直接在img标签插入以下代码即可data-lazyload（需要懒加载的图片），onload。

备注：需要引入:

<script src="./js/md5.min.js" type="text/javascript"></script> <script src="./js/lazyload.js" type="text/javascript"></script>