Every day to see a piece of Code series (four): layzr.js, processing pictures lazy Loading library

Lazy loading of the so-called picture, that is, only when the picture is in or close to the current window to start loading the picture. The library is very simple to use:

var New Layzr ({   ' Data-layzr ',   ///  attr and retinaattr must have at least one to specify the corresponding picture  // generally corresponds to the image than attr to HD  threshold:0,  /// distance from the window to start loading the  null  //  callback function });

Code parsing

The first is the way packaging becomes UMD:

(function(root, factory) {if(typeofdefine = = = ' function ' &&define.amd) {define ([], factory);//use AMD to define a module that relies on an empty}Else if(typeofExports = = = ' object ') {Module.exports= Factory ();//cmd mode, exposing the return value}Else{root. Layzr= Factory ();//In the browser environment  }}( This,function() {})

Next is the constructor:

  functionLayzr (options) { This. _lastscroll = 0;  This. _ticking =false; //Parameters     This. _optionsattr = Options.attr | | ' Data-layzr ';  This. _optionsattrretina = Options.retinaattr | | ' Data-layzr-retina ';  This. _optionsthreshold = Options.threshold | | 0;  This. _optionscallback = Options.callback | |NULL; //get the right properties     This. _retina = window.devicepixelratio > 1;  This. _imgattr = This. _retina? This. _optionsattrretina: This. _optionsattr; //all collection of images     This. _images = document.getElementsByTagName (' img '); //Call to create     This. _create (); }

Create and Destory functions:

Layzr.prototype._create =function() {    //record the initial scroll position     This. _requestscroll (); //Scroll and resize corresponding event handler functionsWindow.addeventlistener (' scroll ', This. _requestscroll.bind ( This),false); Window.addeventlistener (' Resize ', This. _requestscroll.bind ( This),false); } Layzr.prototype._destroy=function() {    //Unbind EventsWindow.removeeventlistener (' scroll ', This. _requestscroll.bind ( This),false); Window.removeeventlistener (' Resize ', This. _requestscroll.bind ( This),false); }

Specific implementations of Requestscroll:

Layzr.prototype._requestscroll =function() {     This. _lastscroll = window.scrolly | | Window.pageyoffset;//scrolling distance in the vertical direction     This. _requesttick (); } Layzr.prototype._requesttick=function() {    if(! This. _ticking) {     //Requestanimationframe is primarily used to draw images and improve efficiency through optimization     //This is used for each scrolling call to updateRequestanimationframe ( This. Update.bind ( This));  This. _ticking =true; }} Layzr.prototype.update=function() {    varImageslength = This. _images.length;  for(vari = 0; i < imageslength; i++) {      varImage = This. _images[i]; //If the current picture has a set of properties      if(Image.hasattribute ( This. _imgattr) | | Image.hasattribute ( This. _optionsattr)) {        //and is already in the window        if( This. _inviewport (image)) {          //Load This image           This. Reveal (image); }      }    }     //Allow for more animation frames     This. _ticking =false; }

Whether to judge in the window:

Layzr.prototype._inviewport =function(imagenode) {//top and bottom of Windows    varViewporttop = This. _lastscroll; varViewportbottom = Viewporttop +Window.innerheight; //top and bottom of the image    varElementtop = This. _getoffset (Imagenode); varElementbottom = Elementtop +Imagenode.offsetheight; //calculate the pixels corresponding to the threshold    varThreshold = ( This. _optionsthreshold/100) *Window.innerheight; //is it in this interval    returnElementbottom >= viewporttop-threshold && elementbottom <= Viewportbottom +threshold; }

Display the implementation of the image:

Layzr.prototype.reveal =function(imagenode) {//get the src of the image    varSource = Imagenode.getattribute ( This. _imgattr) | | Imagenode.getattribute ( This. _optionsattr); //to remove a setting's propertiesImagenode.removeattribute ( This. _optionsattr); Imagenode.removeattribute ( This. _optionsattrretina); //set src    if(source) {Imagenode.setattribute (' SRC ', source); //Call Callback      if(typeof  This. _optionscallback = = = ' function ') {         This. _optionscallback.call (Imagenode); }    }  }

Summarize

1. Basic Flow: Scrolling--"record location-" traverse the picture-"Determine whether in the window-" get and set image from the property src--"Call callback function
2. window.scrolly | | Window.pageyoffset used to get the distance of vertical scrolling
3. Window height: window.innerheight, Element height: node.offsetheight
4. Gets the distance from the top of the element relative to the doucment: http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document

Every day to see a piece of Code series (four): layzr.js, processing pictures lazy Loading library