layzr.js - npm Package Compare versions

Comparing version 1.0.2 to 1.1.2

dist/layzr.js

@@ -14,3 +14,3 @@ (function(root, factory) {
 
-  function Layzr( options ) {
+  function Layzr(options) {
     // debounce
@@ -21,4 +21,6 @@ this._lastScroll = 0;
     // options
+    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;
@@ -29,6 +31,6 @@ this._optionsCallback = options.callback || null;
     this._retina = window.devicePixelRatio > 1;
-    this._imgAttr = this._retina ? this._optionsAttrRetina : this._optionsAttr;
+    this._srcAttr = this._retina ? this._optionsAttrRetina : this._optionsAttr;
 
-    // images LIVE nodelist
-    this._images = document.getElementsByTagName('img');
+    // nodelist
+    this._nodes = document.querySelectorAll(this._optionsSelector);
 
@@ -39,3 +41,3 @@ // call to create
 
-  // DEBOUNCE METHODS
+  // DEBOUNCE HELPERS
   // adapted from: http://www.html5rocks.com/en/tutorials/speed/animations/
@@ -55,4 +57,19 @@
 
-  // Layzr METHODS
+  // OFFSET HELPER
+  // borrowed from: http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
 
+  Layzr.prototype._getOffset = function(element) {
+    var offsetTop  = 0;
+
+    do {
+      if(!isNaN(element.offsetTop)) {
+        offsetTop  += element.offsetTop;
+      }
+    } while (element = element.offsetParent);
+
+    return offsetTop;
+  }
+
+  // LAYZR METHODS
+
   Layzr.prototype._create = function() {
@@ -75,18 +92,3 @@ // fire scroll event once
 
-  // offset helper
-  // borrowed from: http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
-
-  Layzr.prototype._getOffset = function( element ) {
-    var offsetTop  = 0;
-
-    do {
-      if(!isNaN(element.offsetTop)) {
-        offsetTop  += element.offsetTop;
-      }
-    } while (element = element.offsetParent);
-
-    return offsetTop;
-  }
-
-  Layzr.prototype._inViewport = function( imageNode ) {
+  Layzr.prototype._inViewport = function(node) {
     // get viewport top and bottom offset
@@ -96,5 +98,5 @@ var viewportTop = this._lastScroll;
 
-    // get image top and bottom offset
-    var elementTop = this._getOffset(imageNode);
-    var elementBottom = elementTop + imageNode.offsetHeight;
+    // get node top and bottom offset
+    var elementTop = this._getOffset(node);
+    var elementBottom = elementTop + node.offsetHeight;
 
@@ -108,43 +110,52 @@ // calculate threshold, convert percentage to pixel value
 
-  Layzr.prototype.update = function() {
-    // cache image nodelist length
-    var imagesLength = this._images.length;
+  Layzr.prototype._reveal = function(node) {
+    // get node source
+    var source = node.getAttribute(this._srcAttr) || node.getAttribute(this._optionsAttr);
 
-    // loop through images
-    for(var i = 0; i < imagesLength; i++) {
-      // cache image
-      var image = this._images[i];
+    // set node src or bg image
+    if(node.hasAttribute(this._optionsAttrBg)) {
+      node.style.backgroundImage = 'url(' + source + ')';
+    }
+    else {
+      node.setAttribute('src', source);
+    }
 
-      // check if image has attribute
-      if(image.hasAttribute(this._imgAttr) || image.hasAttribute(this._optionsAttr)) {
-        // check if image in viewport
-        if(this._inViewport(image)) {
-          // reveal image
-          this.reveal(image);
-        }
-      }
+    // call the callback
+    if(typeof this._optionsCallback === 'function') {
+      // "this" will be the node in the callback
+      this._optionsCallback.call(node);
     }
 
-    // allow for more animation frames
-    this._ticking = false;
+    // remove node data attributes
+    node.removeAttribute(this._optionsAttr);
+    node.removeAttribute(this._optionsAttrRetina);
+    node.removeAttribute(this._optionsAttrBg);
   }
 
-  Layzr.prototype.reveal = function( imageNode ) {
-    // get image source
-    var source = imageNode.getAttribute(this._imgAttr) || imageNode.getAttribute(this._optionsAttr);
+  Layzr.prototype.updateSelector = function() {
+    // update cached list of elements matching selector
+    this._nodes = document.querySelectorAll(this._optionsSelector);
+  }
 
-    // remove image data attributes
-    imageNode.removeAttribute(this._optionsAttr);
-    imageNode.removeAttribute(this._optionsAttrRetina);
+  Layzr.prototype.update = function() {
+    // cache nodelist length
+    var nodesLength = this._nodes.length;
 
-    // set image source, if it has one
-    if(source) {
-      imageNode.setAttribute('src', source);
+    // loop through nodes
+    for(var i = 0; i < nodesLength; i++) {
+      // cache node
+      var node = this._nodes[i];
 
-      // call the callback
-      if(typeof this._optionsCallback === 'function') {
-        // this will be the image node in the callback
-        this._optionsCallback.call(imageNode);
+      // check if node has mandatory attribute
+      if(node.hasAttribute(this._optionsAttr)) {
+        // check if node in viewport
+        if(this._inViewport(node)) {
+          // reveal node
+          this._reveal(node);
+        }
       }
     }
+
+    // allow for more animation frames
+    this._ticking = false;
   }
@@ -151,0 +162,0 @@

dist/layzr.min.js

@@ -1,1 +0,1 @@
-!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._optionsAttr=t.attr||"data-layzr",this._optionsAttrRetina=t.retinaAttr||"data-layzr-retina",this._optionsThreshold=t.threshold||0,this._optionsCallback=t.callback||null,this._retina=window.devicePixelRatio>1,this._imgAttr=this._retina?this._optionsAttrRetina:this._optionsAttr,this._images=document.getElementsByTagName("img"),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._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._getOffset=function(t){var i=0;do isNaN(t.offsetTop)||(i+=t.offsetTop);while(t=t.offsetParent);return i},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.prototype.update=function(){for(var t=this._images.length,i=0;t>i;i++){var e=this._images[i];(e.hasAttribute(this._imgAttr)||e.hasAttribute(this._optionsAttr))&&this._inViewport(e)&&this.reveal(e)}this._ticking=!1},t.prototype.reveal=function(t){var i=t.getAttribute(this._imgAttr)||t.getAttribute(this._optionsAttr);t.removeAttribute(this._optionsAttr),t.removeAttribute(this._optionsAttrRetina),i&&(t.setAttribute("src",i),"function"==typeof this._optionsCallback&&this._optionsCallback.call(t))},t});
+!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});

package.json

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

README.md

@@ -18,6 +18,4 @@ # Layzr.js
 
-- [x] Add UMD wrapper - for AMD, CommonJS, etc
-- [x] Publish to NPM
 - [ ] Publish to Bower
 
 [![Built With Love](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com)

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

11096

increased by7.47%

Lines of code

124

increased by8.77%

Worsened metrics

Number of lines in readme file

21

decreased by-8.7%

No dependency changes