图片懒加载是通过判断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).jpgvar image_md5           = md5(image_url);var local_image_url     = '_downloads/image/'+image_md5+'.jpg'; // 缓存本地图片urlvar 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>