长春建一个网站大概要多少钱,微信公众号开店流程,北京营销网站制作,科技类网站设计特点图片懒加载是通过判断http图片文件是否存在你的本地#xff0c;如果未存在会将图片缓存到本地#xff0c;如果已经存在就不做缓存#xff0c;使用到的技术md5加密#xff0c;mui、html5.
应客户的要求#xff0c;需要做懒加载#xff0c;本人也找了一段时间才找到这个代…图片懒加载是通过判断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(下载失败,statusstatus);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 classproduct-goods-imgimg srcimg/libai.jpg data-lazyloaddata[floorList][i][productList][j][ImageUrl] onloadlazyload(this) //div;
这个项目是我一年之前做的那时是通过拼接字符串然后append进去如果是用vue或者angular就不用拼接了直接在img标签插入以下代码即可data-lazyload需要懒加载的图片onload。
备注需要引入:
script src./js/md5.min.js typetext/javascript/script
script src./js/lazyload.js typetext/javascript/script
