今天試用了下hello mui上的圖片懶加載功能，發現有些地方還無法滿足我的需求，ajax動態加載的時候無法實現懶加載。

然后又看了下36kr的示例，因為代碼關系實在太多了，耦合度比較高，遂自己動手寫了一個輕量級的懶加載功能模塊，而且支持圖片緩存到本地哦~~~

歡迎各位拍磚，交流碰撞思想！

升級日志

v1.1.0 build 20160107

1、已增加 @LFZ 的代碼，不用重復下載兩次服務器端的圖片

2、新增圖片加載淡入特效

3、新增圖片加載完成后回調

4、修改data-src為data-lazyload

功能特性

~原生實現，不依賴任何前端框架

~ajax動態加載支持圖片懶加載

~支持圖片緩存到本地

~輕量模塊化

如何使用

1、引入md5.min.js，因為依賴js版md5函數，用于將圖片url轉換為32位md5

2、在頭部js包含下面的lazyload方法函數，否則可能報錯函數未定義

3、HTML代碼使用ajax動態生成如下img標簽，src為默認圖片，data-src填寫圖片網絡地址，并且必須包含onload事件來觸發懶加載功能。

注意：因為函數依賴plus.io和plus.downloader接口，所以在plus還沒ready的時候img onload執行lazyload可能會報錯，lazyload比plus先執行完畢。

當然，在真實環境中，不管是商品列表、訂單列表等，我們的圖片一般都是動態加載的，所以問題不大。

在代碼的寫法策略上需要使用動態加載方式，盡量不使用寫死在html里面。

4、添加.img-lazyload 支持圖片淡入樣式

@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

.img-lazyload{-webkit-animation: fadeIn 350ms linear 0ms 1 normal both;animation: fadeIn 350ms linear 0ms 1 normal both;opacity:1;}

5、圖片默認緩存到_downloads/image/目錄下

活動圖

函數源代碼

/**

* 圖片懶加載

* @param {Object} obj DOMElement

* @param {Function} callback 加載完成回調函數

*

* @author fanrong33

* @version 1.1.0 build 20160107

*/

function lazyload(obj, callback){

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); // 平臺絕對路徑

// 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();

}

}

總結

以上是生活随笔為你收集整理的load方法引入本地html报错,分享基于plus.downloader的图片懒加载功能，支持本地缓存v1.1.0...的全部內容，希望文章能夠幫你解決所遇到的問題。

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