layzr.js - npm Package Compare versions

Comparing version 1.1.5 to 1.2.0

dist/layzr.js

@@ -17,14 +17,15 @@ (function(root, factory) {
     this._lastScroll = 0;
-    this._ticking = false;
+    this._ticking    = false;
 
     // options
-    this._optionsSelector = options.selector || '[data-layzr]';
-    this._optionsAttr = options.attr || 'data-layzr';
+    this._optionsSelector   = options.selector || '[data-layzr]';
+    this._optionsAttr       = options.attr || 'data-layzr';
     this._optionsAttrRetina = options.retinaAttr || 'data-layzr-retina';
-    this._optionsAttrBg = options.bgAttr || 'data-layzr-bg';
-    this._optionsThreshold = options.threshold || 0;
-    this._optionsCallback = options.callback || null;
+    this._optionsAttrBg     = options.bgAttr || 'data-layzr-bg';
+    this._optionsAttrHidden = options.hiddenAttr || 'data-layzr-hidden';
+    this._optionsThreshold  = options.threshold || 0;
+    this._optionsCallback   = options.callback || null;
 
     // properties
-    this._retina = window.devicePixelRatio > 1;
+    this._retina  = window.devicePixelRatio > 1;
     this._srcAttr = this._retina ? this._optionsAttrRetina : this._optionsAttr;
@@ -58,9 +59,9 @@
   Layzr.prototype._getOffset = function(element) {
-    var offsetTop  = 0;
+    var offsetTop = 0;
 
     do {
       if(!isNaN(element.offsetTop)) {
-        offsetTop  += element.offsetTop;
+        offsetTop += element.offsetTop;
       }
-    } while (element = element.offsetParent);
+    } while(element = element.offsetParent);
 
@@ -102,3 +103,5 @@ return offsetTop;
     // return if element in viewport
-    return elementBottom >= viewportTop - threshold && elementBottom <= viewportBottom + threshold;
+    return elementBottom >= viewportTop - threshold
+        && elementBottom <= viewportBottom + threshold
+        && !node.hasAttribute(this._optionsAttrHidden);
   };
@@ -128,2 +131,3 @@
     node.removeAttribute(this._optionsAttrBg);
+    node.removeAttribute(this._optionsAttrHidden);
   };
@@ -130,0 +134,0 @@

dist/layzr.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.Layzr=e()}(this,function(){"use strict";function t(t){this._lastScroll=0,this._ticking=!1,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._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 e=0;do isNaN(t.offsetTop)||(e+=t.offsetTop);while(t=t.offsetParent);return e},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 e=this._lastScroll,i=e+window.innerHeight,o=this._getOffset(t),s=o+t.offsetHeight,r=this._optionsThreshold/100*window.innerHeight;return s>=e-r&&i+r>=s},t.prototype._reveal=function(t){var e=t.getAttribute(this._srcAttr)||t.getAttribute(this._optionsAttr);t.hasAttribute(this._optionsAttrBg)?t.style.backgroundImage="url("+e+")":t.setAttribute("src",e),"function"==typeof this._optionsCallback&&this._optionsCallback.call(t),t.removeAttribute(this._optionsAttr),t.removeAttribute(this._optionsAttrRetina),t.removeAttribute(this._optionsAttrBg)},t.prototype.updateSelector=function(){this._nodes=document.querySelectorAll(this._optionsSelector)},t.prototype.update=function(){for(var t=this._nodes.length,e=0;t>e;e++){var i=this._nodes[e];i.hasAttribute(this._optionsAttr)&&this._inViewport(i)&&this._reveal(i)}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,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>=s&&!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.1.5",
+  "version":     "1.2.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

@@ -64,2 +64,12 @@ # Layzr.js
 
+#### (Optional) Hidden Images
+
+Include the `data-layzr-hidden` attribute to prevent an image from loading.
+
+Removing this attribute _will not load the image_ - the user will still need to scroll, and the element will still need to be in the viewport.
+
+```html
+<img data-layzr="image/source" data-layzr-hidden>
+```
+
 ### Instance Creation
@@ -85,2 +95,3 @@
   bgAttr: 'data-layzr-bg',
+  hiddenAttr: 'data-layzr-hidden',
   threshold: 0,
@@ -116,3 +127,3 @@ callback: null
 
-Customize the data attribute that loads the image as a background.
+Customize the data attribute that loads images as a background.
 
@@ -125,2 +136,12 @@ ```javascript
 
+### hiddenAttr
+
+Customize the data attribute that prevents images from loading.
+
+```javascript
+var layzr = new Layzr({
+  hiddenAttr: 'data-layzr-hidden'
+});
+```
+
 ### threshold
@@ -127,0 +148,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17128

increased by5.64%

Lines of code

153

increased by2.68%

Number of lines in readme file

199

increased by11.8%

No dependency changes