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