javascript Waterfall image lazy load instance analysis and optimization

I wrote the article of "lazy loading" of the first version of the image before. When I was sorting out the file at the weekend, I probably looked at the code I had written before and found that there were many things that could be optimized.
This article is mainly combined with the previous "javascript waterfall streaming image lazy loading example" to see the picture "lazy loading" 1 some knowledge.

The main idea of lazy loading:
Load the image according to the need, that is to say, load the image display when it needs to be displayed, to reduce the network bandwidth overhead of a sexual load.

Let's start with a snippet of code:

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

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

The main thing I want to do here is to combine the user configuration with the default configuration. It's not very elegant to write this code. Now I'm going to use $.extend to do the optimization, and the code is as follows:

_this.setting = {
   "mobileHeight": 0, // Extend the height of the screen to make the control 1 The number of screen loads can be configured 
   "loadNum": 1 // When scrolling, the number of nodes loaded after the current node 
  };

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

Here I will highlight the two new parameters I added, mobileHeight and loadNum

The default height of mobileHeight client, the higher the value, the more images will be loaded on the first screen;

If the current node appears on the screen, loadNum can load several nodes after the current node once, which can jump the loading speed of the image.

Here's what My code looked like before:

_this.loadFirstScreen = function() {
   if (conf.loadfirst) {
    lazyNode.each(function(i) {
     currentNodeTop = $(this).offset().top;
     // Here, 800 That's what I mentioned above mobileHeight
     if (currentNodeTop < mobileHeight + 800) {
      _this.replaceImgSrc($(this));
     }
    });
   }
  };

_this.loadImg = function() {
   if (conf.loadimg) {
    $(window).on('scroll', function() {
     var imgLazyList = $('[node-type=imglazy]', node);
     // Here, 5 That's what I mentioned above loadNum
     for (var i = 0; i < 5; i++) {
      _this.replaceImgSrc(imgLazyList.eq(i));
     }
    });
   }
  };

My current code looks like this:

loadFirstSrceen: function() {
   //  Load the first screen 
   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() {
   // Load the image while scrolling 
   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()) {
     // The specified number of nodes after loading the current node 
     for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
      _this.replaceImgSrc($(imgLazyList).eq(i));
     }
     return false;
    }
   });
  }

A more important aspect is to organize the current code structure around the idea of writing plug-ins. The code is as follows:

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

  _this.setting = {
   "mobileHeight": 0, // Extend the height of the screen to make the control 1 The number of screen loads can be configured 
   "loadNum": 1 // When scrolling, the number of nodes loaded after the current node 
  };

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

  _this.loadFirstSrceen();
  $(window).on('scroll', function() {
   _this.scrollLoadImg();
  });


 };

 LoadImgLazy.prototype = {
  mobileHeight: function() {
   return $(window).height();
  },
  loadFirstSrceen: function() {
   //  Load the first screen 
   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() {
   // Load the image while scrolling 
   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()) {
     // The specified number of nodes after loading the current node 
     for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
      _this.replaceImgSrc($(imgLazyList).eq(i));
     }
     return false;
    }
   });
  },
  replaceImgSrc: function(loadImgNode) {
   // Dynamic replacement picture 
   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');
      }
     }
    });
    // Removes a lazy load node that has been run node-type  Performance improvement 
    $(loadImgNode).removeAttr('node-type');
   }
  },
  getSetting: function() {
   var userSetting = $('[lazy-setting]').attr('lazy-setting');
   if (userSetting && userSetting !== '') {
    return $.parseJSON(userSetting);
   } else {
    return {};
   }
  },
  destory: function() {
   // Destruction method area 
   $(window).off('scroll');
  }
 };

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

 window.LoadImgLazy = LoadImgLazy;

})(Zepto);

Through this article I hope you have a deeper understanding of javascript waterfall streaming image lazy load, learn to optimize methods, thank you for your reading.