JavaScript Waterfall streaming Picture Lazy loading example analysis and optimization _javascript skill

Previously wrote a version of the picture "lazy load" article, just the weekend in the collation of documents, and probably read the previous code found that there are many can optimize the place.
This article is mainly in conjunction with the " JavaScript waterfall streaming picture lazy loading instance " To see the picture "lazy load" some knowledge.

The theme of the picture "lazy load":
Load the picture as needed, which means that you need to display it and then load the picture to reduce the overhead of a one-time-loaded network bandwidth.

Let's look at a piece of code:

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

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

Here I want to implement the main, user configuration and default configuration of the merge, so write code is not very elegant, now use $.extend to do optimization, the code is as follows:

_this.setting = {
   "mobileheight": 0,//Expand the height of the screen, so that the first screen load can be configured
   "Loadnum": 1//scrolling, after the current node load number
  };

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

Here is a key introduction to my newly added two parameters mobileheight,loadnum

Mobileheight The default client height, the larger the value, the more pictures the first screen loads;

Loadnum If the current node appears on the screen, you can load a number of nodes after the current node at a time, you can load the high jump picture speed;

My code was written like this before:

_this.loadfirstscreen = function () {
   if (conf.loadfirst) {
    Lazynode.each (function (i) {
     currentnodetop = $ ( This). Offset (). Top;
     The 800 here is the mobileheight
     if (Currentnodetop < Mobileheight +) {
      _this.replaceimgsrc ($ (this)) mentioned above;
    });
   }
  };

_this.loadimg = function () {
   if (conf.loadimg) {
    $ (window). On (' scroll ', function () {
     var imglazylist = $ ( ' [Node-type=imglazy] ', node);
     Here's 5 is the loadnum for
     (var i = 0; i < 5; i++) {
      _this.replaceimgsrc (Imglazylist.eq (i));
     }
    );
   }
  };

To optimize my current code in terms of configurable ideas this is the following:

Loadfirstsrceen:function () {
   //Load 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 () {
   //scrolling when loading picture
   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 ()) {
     //load the specified number of nodes after 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 according to 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,//Expand the height of the screen, so that the first screen load can be configured "Loadnum": 1//scrolling, after the current node load number};

  $.extend (_this.setting, _this.getsetting ());
  _this.loadfirstsrceen ();
  $ (window). On (' scroll ', function () {_this.scrollloadimg ();


 });

 };
  Loadimglazy.prototype = {Mobileheight:function () {return $ (window). Height ();
   }, Loadfirstsrceen:function () {//Load 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 () {//scrolling when loading picture 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 ()) {//load the specified number of nodes after the current node for (var i = 0, Len = _this.setting . Loadnum; i < Len;
     i++) {_this.replaceimgsrc ($ (imglazylist). EQ (i));
    return false;
  }
   });
   }, Replaceimgsrc:function (Loadimgnode) {//dynamically replaces the 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 ');
    }
     }
    });
   Remove the node-type that has already run the lazy load node for performance promotion $ (Loadimgnode). Removeattr (' Node-type ');
   }, Getsetting:function () {var usersetting = $ (' [lazy-setting] '). attr (' lazy-setting '); if (usersetting && usersetting!)= = = ') {return $.parsejson (usersetting);
   else {return {};
  }, Destory:function () {//Destroy 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 picture lazy loading, learn to optimize the method, thank you for your reading.