快捷導(dǎo)航

javascript瀑布流式圖片懶加載實(shí)例解析與優(yōu)化

更新時(shí)間：2016年02月23日 16:47:08 作者：zhiqiang21

這篇文章主要針對(duì)javascript瀑布流式圖片懶加載實(shí)例進(jìn)行解析與優(yōu)化，感興趣的小伙伴們可以參考一下

之前寫過一版圖片“懶加載”的文章，剛好周末在整理文件的時(shí)候，大概又看了一遍之前寫的代碼發(fā)現(xiàn)有很多可以優(yōu)化的地方。
這篇文章主要就是結(jié)合上篇《javascript瀑布流式圖片懶加載實(shí)例》再來看看圖片“懶加載”的一些知識(shí)。

圖片“懶加載”的主旨：
按照需要加載圖片，也就是說需要顯示的時(shí)候再加載圖片顯示，減少一次性加載的網(wǎng)絡(luò)帶寬開銷。

先來看一段代碼：

 var conf = {
   'loadfirst': true,
   'loadimg': true
  };

  for (var item in conf) {
   if (item in co) {
    conf.item = co.item;
   }
  }

這里我主要是想實(shí)現(xiàn)，用戶配置和默認(rèn)配置的合并，這樣寫代碼并不是很優(yōu)雅，現(xiàn)在使用$.extend來做優(yōu)化，代碼如下：

_this.setting = {
   "mobileHeight": 0, //擴(kuò)展屏幕的高度，使第一屏加載個(gè)數(shù)可配置
   "loadNum": 1 //滾動(dòng)時(shí)，當(dāng)前節(jié)點(diǎn)之后加載個(gè)數(shù)
  };

  $.extend(_this.setting, _this.getSetting());

這里重點(diǎn)介紹下，我新添加的兩個(gè)參數(shù)mobileHeight,loadNum

mobileHeight 默認(rèn)客戶端的高度，值越大，首屏加載的圖片越多;

loadNum 如果當(dāng)前節(jié)點(diǎn)出現(xiàn)在屏幕上以后，可以一次性加載當(dāng)前節(jié)點(diǎn)之后的若干個(gè)節(jié)點(diǎn)，可以跳高圖片的加載速度;

之前我的代碼是這樣子寫的：

_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));
     }
    });
   }
  };

按照可配置的想法來優(yōu)化我現(xiàn)在的代碼就是下面的這個(gè)樣子的：

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() {
   //滾動(dòng)的時(shí)候加載圖片
   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()) {
     //加載當(dāng)前節(jié)點(diǎn)后的規(guī)定個(gè)數(shù)節(jié)點(diǎn)
     for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
      _this.replaceImgSrc($(imgLazyList).eq(i));
     }
     return false;
    }
   });
  }

更重要的一個(gè)方面就是按照編寫插件的思想來組織現(xiàn)在的代碼結(jié)構(gòu)。代碼如下：

;(function($) {
 var LoadImgLazy = function(imgNode) {
  var _this = this;
  _this.imgNode = imgNode;

  _this.setting = {
   "mobileHeight": 0, //擴(kuò)展屏幕的高度，使第一屏加載個(gè)數(shù)可配置
   "loadNum": 1 //滾動(dòng)時(shí)，當(dāng)前節(jié)點(diǎn)之后加載個(gè)數(shù)
  };

  $.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() {
   //滾動(dòng)的時(shí)候加載圖片
   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()) {
     //加載當(dāng)前節(jié)點(diǎn)后的規(guī)定個(gè)數(shù)節(jié)點(diǎn)
     for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
      _this.replaceImgSrc($(imgLazyList).eq(i));
     }
     return false;
    }
   });
  },
  replaceImgSrc: function(loadImgNode) {
   //動(dòng)態(tài)替換圖片
   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');
      }
     }
    });
    //移除已經(jīng)運(yùn)行過懶加載節(jié)點(diǎn)的node-type 對(duì)性能提升
    $(loadImgNode).removeAttr('node-type');
   }
  },
  getSetting: function() {
   var userSetting = $('[lazy-setting]').attr('lazy-setting');
   if (userSetting && userSetting !== '') {
    return $.parseJSON(userSetting);
   } else {
    return {};
   }
  },
  destory: function() {
   //銷毀方法區(qū)
   $(window).off('scroll');
  }
 };

 LoadImgLazy.init = function(imgNode) {
  new this(imgNode);
 };

 window.LoadImgLazy = LoadImgLazy;

})(Zepto);

通過這篇文章希望大家對(duì)javascript瀑布流式圖片懶加載有了更深的認(rèn)識(shí)，學(xué)會(huì)優(yōu)化方法，謝謝大家的閱讀。

您可能感興趣的文章: