javascript瀑布流式圖片懶載入執行個體解析與最佳化，javascript瀑布

javascript瀑布流式圖片懶載入執行個體解析與最佳化，javascript瀑布

之前寫過一版圖片“懶載入”的文章，剛好周末在整理檔案的時候，大概又看了一遍之前寫的代碼發現有很多可以最佳化的地方。
這篇文章主要就是結合上篇《javascript瀑布流式圖片懶載入執行個體》再來看看圖片“懶載入”的一些知識。

圖片“懶載入”的主旨：
按照需要載入圖片，也就是說需要顯示的時候再載入圖片顯示，減少一次性載入的網路頻寬開銷。

先來看一段代碼：

 var conf = {   'loadfirst': true,   'loadimg': true  };  for (var item in conf) {   if (item in co) {    conf.item = co.item;   }  }

這裡我主要是想實現，使用者配置和預設配置的合并，這樣寫代碼並不是很優雅，現在使用$.extend來做最佳化，代碼如下：

_this.setting = {   "mobileHeight": 0, //擴充螢幕的高度，使第一屏載入個數可配置   "loadNum": 1 //滾動時，當前節點之後載入個數  };  $.extend(_this.setting, _this.getSetting());

這裡重點介紹下，我新添加的兩個參數mobileHeight,loadNum

mobileHeight 預設用戶端的高度，值越大，首屏載入的圖片越多;

loadNum 如果當前節點出現在螢幕上以後，可以一次性載入當前節點之後的若干個節點，可以跳高圖片的載入速度;

之前My Code是這樣子寫的：

_this.loadFirstScreen = function() {   if (conf.loadfirst) {    lazyNode.each(function(i) {     currentNodeTop = $(this).offset().top;     //這裡的800就是上面提到的mobileHeight     if (currentNodeTop < mobileHeight + 800) {      _this.replaceImgSrc($(this));     }    });   }  };_this.loadImg = function() {   if (conf.loadimg) {    $(window).on('scroll', function() {     var imgLazyList = $('[node-type=imglazy]', node);     //這裡的5就是上面提到的loadNum     for (var i = 0; i < 5; i++) {      _this.replaceImgSrc(imgLazyList.eq(i));     }    });   }  };

按照可配置的想法來最佳化我現在的代碼就是下面的這個樣子的：

loadFirstSrceen: function() {   // 載入首屏   var _this = this;   var currentNodeTop;   var imgNodeList = _this.imgNode;   $(imgNodeList).each(function() {    currentNodeTop = $(this).offset().top;    if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {     _this.replaceImgSrc($(this));    }   });  },  scrollLoadImg: function() {   //滾動的時候載入圖片   var _this = this;   var currentNodeTop;   var scrollTop = $('body').scrollTop();   var imgLazyList = $('[node-type=imglazy]');   $(imgLazyList).each(function() {    currentNodeTop = $(this).offset().top;    if (currentNodeTop - scrollTop < _this.mobileHeight()) {     //載入當前節點後的規定個數節點     for (var i = 0, len = _this.setting.loadNum; i < len; i++) {      _this.replaceImgSrc($(imgLazyList).eq(i));     }     return false;    }   });  }

更重要的一個方面就是按照編寫外掛程式的思想來組織現在的代碼結構。代碼如下：

;(function($) { var LoadImgLazy = function(imgNode) {  var _this = this;  _this.imgNode = imgNode;  _this.setting = {   "mobileHeight": 0, //擴充螢幕的高度，使第一屏載入個數可配置   "loadNum": 1 //滾動時，當前節點之後載入個數  };  $.extend(_this.setting, _this.getSetting());  _this.loadFirstSrceen();  $(window).on('scroll', function() {   _this.scrollLoadImg();  }); }; LoadImgLazy.prototype = {  mobileHeight: function() {   return $(window).height();  },  loadFirstSrceen: function() {   // 載入首屏   var _this = this;   var currentNodeTop;   var imgNodeList = _this.imgNode;   $(imgNodeList).each(function() {    currentNodeTop = $(this).offset().top;    if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {     _this.replaceImgSrc($(this));    }   });  },  scrollLoadImg: function() {   //滾動的時候載入圖片   var _this = this;   var currentNodeTop;   var scrollTop = $('body').scrollTop();   var imgLazyList = $('[node-type=imglazy]');   $(imgLazyList).each(function() {    currentNodeTop = $(this).offset().top;    if (currentNodeTop - scrollTop < _this.mobileHeight()) {     //載入當前節點後的規定個數節點     for (var i = 0, len = _this.setting.loadNum; i < len; i++) {      _this.replaceImgSrc($(imgLazyList).eq(i));     }     return false;    }   });  },  replaceImgSrc: function(loadImgNode) {   //動態替換圖片   var srcValue;   var imgDataSrc;   var _this = this;   var imgUrlList = $(loadImgNode).find('img[data-lazysrc]');   if (imgUrlList.length > 0) {    imgUrlList.each(function(i) {     imgDataSrc = $(this).attr('data-lazysrc');     srcValue = $(this).attr('src');     if (srcValue === '#') {      if (imgDataSrc) {       $(this).attr('src', imgDataSrc);       $(this).removeAttr('data-lazysrc');      }     }    });    //移除已經運行過懶載入節點的node-type 對效能提升    $(loadImgNode).removeAttr('node-type');   }  },  getSetting: function() {   var userSetting = $('[lazy-setting]').attr('lazy-setting');   if (userSetting && userSetting !== '') {    return $.parseJSON(userSetting);   } else {    return {};   }  },  destory: function() {   //銷毀方法區   $(window).off('scroll');  } }; LoadImgLazy.init = function(imgNode) {  new this(imgNode); }; window.LoadImgLazy = LoadImgLazy;})(Zepto);

通過這篇文章希望大家對javascript瀑布流式圖片懶載入有了更深的認識，學會最佳化方法，謝謝大家的閱讀。

您可能感興趣的文章:

• 基於jquery的圖片懶載入js
• js實現的美女瀑布流效果代碼
• javascript自適應寬度的瀑布流實現思路
• 純js實現瀑布流展現照片(自動適應視窗大小)
• 解析瀑布流布局:JS+絕對位置的實現
• js實現瀑布流的一種簡單方法執行個體分享
• 原生JS實現響應式瀑布流布局
• 基於javascript實現圖片懶載入