圖片懶加載是通過判斷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>

總結

以上是生活随笔為你收集整理的图片本地缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。