layzr.js - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

bower.json

 {
   "name":        "layzr.js",
-  "version":     "1.2.3",
+  "version":     "1.4.0",
   "description": "A small, fast, modern, and dependency-free library for lazy loading.",
@@ -5,0 +5,0 @@ "homepage":    "http://callmecavs.github.io/layzr.js/",

dist/layzr.js

 /*!
- * Layzr.js 1.3.0 - A small, fast, modern, and dependency-free library for lazy loading.
+ * Layzr.js 1.4.0 - A small, fast, modern, and dependency-free library for lazy loading.
  * Copyright (c) 2015 Michael Cavalea - http://callmecavs.github.io/layzr.js/
@@ -28,2 +28,3 @@ * License: MIT
 
+  this._optionsContainer  = document.querySelector(options.container) || window;
   this._optionsSelector   = options.selector || '[data-layzr]';
@@ -52,3 +53,9 @@ this._optionsAttr       = options.attr || 'data-layzr';
 Layzr.prototype._requestScroll = function() {
-  this._lastScroll = window.scrollY || window.pageYOffset;
+  if(this._optionsContainer === window) {
+    this._lastScroll = window.scrollY || window.pageYOffset;
+  }
+  else {
+    this._lastScroll = this._optionsContainer.scrollTop + this._getOffset(this._optionsContainer);
+  }
+
   this._requestTick();
@@ -79,2 +86,9 @@ };
 
+// HEIGHT HELPER
+
+Layzr.prototype._getContainerHeight = function() {
+  return this._optionsContainer.innerHeight
+      || this._optionsContainer.offsetHeight;
+}
+
 // LAYZR METHODS
@@ -87,4 +101,4 @@
   // bind scroll and resize event
-  window.addEventListener('scroll', this._requestScroll.bind(this), false);
-  window.addEventListener('resize', this._requestScroll.bind(this), false);
+  this._optionsContainer.addEventListener('scroll', this._requestScroll.bind(this), false);
+  this._optionsContainer.addEventListener('resize', this._requestScroll.bind(this), false);
 };
@@ -96,4 +110,4 @@
   // unbind scroll and resize event
-  window.removeEventListener('scroll', this._requestScroll.bind(this), false);
-  window.removeEventListener('resize', this._requestScroll.bind(this), false);
+  this._optionsContainer.removeEventListener('scroll', this._requestScroll.bind(this), false);
+  this._optionsContainer.removeEventListener('resize', this._requestScroll.bind(this), false);
 };
@@ -104,7 +118,7 @@
   var viewportTop = this._lastScroll;
-  var viewportBottom = viewportTop + window.innerHeight;
+  var viewportBottom = viewportTop + this._getContainerHeight();
 
   // get node top and bottom offset
   var elementTop = this._getOffset(node);
-  var elementBottom = elementTop + node.offsetHeight;
+  var elementBottom = elementTop + this._getContainerHeight();
 
@@ -111,0 +125,0 @@ // calculate threshold, convert percentage to pixel value

dist/layzr.min.js

 /*!
- * Layzr.js 1.3.0 - A small, fast, modern, and dependency-free library for lazy loading.
+ * Layzr.js 1.4.0 - A small, fast, modern, and dependency-free library for lazy loading.
  * Copyright (c) 2015 Michael Cavalea - http://callmecavs.github.io/layzr.js/
  * License: MIT
  */
-!function(t,i){"function"==typeof define&&define.amd?define([],i):"object"==typeof exports?module.exports=i():t.Layzr=i()}(this,function(){"use strict";function t(t){this._lastScroll=0,this._ticking=!1,t=t||{},this._optionsSelector=t.selector||"[data-layzr]",this._optionsAttr=t.attr||"data-layzr",this._optionsAttrRetina=t.retinaAttr||"data-layzr-retina",this._optionsAttrBg=t.bgAttr||"data-layzr-bg",this._optionsAttrHidden=t.hiddenAttr||"data-layzr-hidden",this._optionsThreshold=t.threshold||0,this._optionsCallback=t.callback||null,this._retina=window.devicePixelRatio>1,this._srcAttr=this._retina?this._optionsAttrRetina:this._optionsAttr,this._nodes=document.querySelectorAll(this._optionsSelector),this._create()}return t.prototype._requestScroll=function(){this._lastScroll=window.scrollY||window.pageYOffset,this._requestTick()},t.prototype._requestTick=function(){this._ticking||(requestAnimationFrame(this.update.bind(this)),this._ticking=!0)},t.prototype._getOffset=function(t){var i=0;do isNaN(t.offsetTop)||(i+=t.offsetTop);while(t=t.offsetParent);return i},t.prototype._create=function(){this._requestScroll(),window.addEventListener("scroll",this._requestScroll.bind(this),!1),window.addEventListener("resize",this._requestScroll.bind(this),!1)},t.prototype._destroy=function(){window.removeEventListener("scroll",this._requestScroll.bind(this),!1),window.removeEventListener("resize",this._requestScroll.bind(this),!1)},t.prototype._inViewport=function(t){var i=this._lastScroll,e=i+window.innerHeight,o=this._getOffset(t),s=o+t.offsetHeight,r=this._optionsThreshold/100*window.innerHeight;return s>=i-r&&e+r>=o&&!t.hasAttribute(this._optionsAttrHidden)},t.prototype._reveal=function(t){var i=t.getAttribute(this._srcAttr)||t.getAttribute(this._optionsAttr);t.hasAttribute(this._optionsAttrBg)?t.style.backgroundImage="url("+i+")":t.setAttribute("src",i),"function"==typeof this._optionsCallback&&this._optionsCallback.call(t),t.removeAttribute(this._optionsAttr),t.removeAttribute(this._optionsAttrRetina),t.removeAttribute(this._optionsAttrBg),t.removeAttribute(this._optionsAttrHidden)},t.prototype.updateSelector=function(){this._nodes=document.querySelectorAll(this._optionsSelector)},t.prototype.update=function(){for(var t=this._nodes.length,i=0;t>i;i++){var e=this._nodes[i];e.hasAttribute(this._optionsAttr)&&this._inViewport(e)&&this._reveal(e)}this._ticking=!1},t});
+!function(t,i){"function"==typeof define&&define.amd?define([],i):"object"==typeof exports?module.exports=i():t.Layzr=i()}(this,function(){"use strict";function t(t){this._lastScroll=0,this._ticking=!1,t=t||{},this._optionsContainer=document.querySelector(t.container)||window,this._optionsSelector=t.selector||"[data-layzr]",this._optionsAttr=t.attr||"data-layzr",this._optionsAttrRetina=t.retinaAttr||"data-layzr-retina",this._optionsAttrBg=t.bgAttr||"data-layzr-bg",this._optionsAttrHidden=t.hiddenAttr||"data-layzr-hidden",this._optionsThreshold=t.threshold||0,this._optionsCallback=t.callback||null,this._retina=window.devicePixelRatio>1,this._srcAttr=this._retina?this._optionsAttrRetina:this._optionsAttr,this._nodes=document.querySelectorAll(this._optionsSelector),this._create()}return t.prototype._requestScroll=function(){this._lastScroll=this._optionsContainer===window?window.scrollY||window.pageYOffset:this._optionsContainer.scrollTop+this._getOffset(this._optionsContainer),this._requestTick()},t.prototype._requestTick=function(){this._ticking||(requestAnimationFrame(this.update.bind(this)),this._ticking=!0)},t.prototype._getOffset=function(t){var i=0;do isNaN(t.offsetTop)||(i+=t.offsetTop);while(t=t.offsetParent);return i},t.prototype._getContainerHeight=function(){return this._optionsContainer.innerHeight||this._optionsContainer.offsetHeight},t.prototype._create=function(){this._requestScroll(),this._optionsContainer.addEventListener("scroll",this._requestScroll.bind(this),!1),this._optionsContainer.addEventListener("resize",this._requestScroll.bind(this),!1)},t.prototype._destroy=function(){this._optionsContainer.removeEventListener("scroll",this._requestScroll.bind(this),!1),this._optionsContainer.removeEventListener("resize",this._requestScroll.bind(this),!1)},t.prototype._inViewport=function(t){var i=this._lastScroll,e=i+this._getContainerHeight(),o=this._getOffset(t),n=o+this._getContainerHeight(),s=this._optionsThreshold/100*window.innerHeight;return n>=i-s&&e+s>=o&&!t.hasAttribute(this._optionsAttrHidden)},t.prototype._reveal=function(t){var i=t.getAttribute(this._srcAttr)||t.getAttribute(this._optionsAttr);t.hasAttribute(this._optionsAttrBg)?t.style.backgroundImage="url("+i+")":t.setAttribute("src",i),"function"==typeof this._optionsCallback&&this._optionsCallback.call(t),t.removeAttribute(this._optionsAttr),t.removeAttribute(this._optionsAttrRetina),t.removeAttribute(this._optionsAttrBg),t.removeAttribute(this._optionsAttrHidden)},t.prototype.updateSelector=function(){this._nodes=document.querySelectorAll(this._optionsSelector)},t.prototype.update=function(){for(var t=this._nodes.length,i=0;t>i;i++){var e=this._nodes[i];e.hasAttribute(this._optionsAttr)&&this._inViewport(e)&&this._reveal(e)}this._ticking=!1},t});

package.json

 {
   "name":        "layzr.js",
-  "version":     "1.3.0",
+  "version":     "1.4.0",
   "description": "A small, fast, modern, and dependency-free library for lazy loading.",
@@ -5,0 +5,0 @@ "homepage":    "http://callmecavs.github.io/layzr.js/",

README.md

@@ -106,2 +106,3 @@ # Layzr.js
 var layzr = new Layzr({
+  container: null,
   selector: '[data-layzr]',
@@ -119,2 +120,14 @@ attr: 'data-layzr',
 
+### container
+
+Customize the container that holds the elements to lazy load - using CSS selector syntax. This option may be useful when building single page applications.
+
+Note that `window` is assumed to be the container if this option is set to `null`.
+
+```javascript
+var layzr = new Layzr({
+  container: null
+});
+```
+
 ### selector
@@ -121,0 +134,0 @@

src/layzr.js

@@ -13,2 +13,3 @@ 'use strict';
 
+  this._optionsContainer  = document.querySelector(options.container) || window;
   this._optionsSelector   = options.selector || '[data-layzr]';
@@ -37,3 +38,9 @@ this._optionsAttr       = options.attr || 'data-layzr';
 Layzr.prototype._requestScroll = function() {
-  this._lastScroll = window.scrollY || window.pageYOffset;
+  if(this._optionsContainer === window) {
+    this._lastScroll = window.scrollY || window.pageYOffset;
+  }
+  else {
+    this._lastScroll = this._optionsContainer.scrollTop + this._getOffset(this._optionsContainer);
+  }
+
   this._requestTick();
@@ -64,2 +71,9 @@ };
 
+// HEIGHT HELPER
+
+Layzr.prototype._getContainerHeight = function() {
+  return this._optionsContainer.innerHeight
+      || this._optionsContainer.offsetHeight;
+}
+
 // LAYZR METHODS
@@ -72,4 +86,4 @@
   // bind scroll and resize event
-  window.addEventListener('scroll', this._requestScroll.bind(this), false);
-  window.addEventListener('resize', this._requestScroll.bind(this), false);
+  this._optionsContainer.addEventListener('scroll', this._requestScroll.bind(this), false);
+  this._optionsContainer.addEventListener('resize', this._requestScroll.bind(this), false);
 };
@@ -81,4 +95,4 @@
   // unbind scroll and resize event
-  window.removeEventListener('scroll', this._requestScroll.bind(this), false);
-  window.removeEventListener('resize', this._requestScroll.bind(this), false);
+  this._optionsContainer.removeEventListener('scroll', this._requestScroll.bind(this), false);
+  this._optionsContainer.removeEventListener('resize', this._requestScroll.bind(this), false);
 };
@@ -89,7 +103,7 @@
   var viewportTop = this._lastScroll;
-  var viewportBottom = viewportTop + window.innerHeight;
+  var viewportBottom = viewportTop + this._getContainerHeight();
 
   // get node top and bottom offset
   var elementTop = this._getOffset(node);
-  var elementBottom = elementTop + node.offsetHeight;
+  var elementBottom = elementTop + this._getContainerHeight();
 
@@ -96,0 +110,0 @@ // calculate threshold, convert percentage to pixel value

No alert changes

Improved metrics

Total package byte prevSize

23630

increased by8.82%

Lines of code

304

increased by7.8%

Number of lines in readme file

228

increased by6.05%

No dependency changes