lazy-blur.js - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

dist/lazy-blur.js

 /*!
- * lazy-blur.js 0.1.6 - Progressive image loader with SVG blur effect
+ * lazy-blur.js 0.1.7 - Progressive image loader with SVG blur effect
  * Copyright (c) 2016 Rplus - https://github.com/Rplus/lazy-blur.js
@@ -108,63 +108,67 @@ * License: MIT
 
-  // events for loading img
-  switch (opt.eventType) {
-    case 'click':
-    case 'mouseenter':
-      opt.imgs.map(function (img) {
-        img.addEventListener(opt.eventType, bindManualEvent);
+  var bindScrollEvent = function bindScrollEvent() {
+    var getImgPos = function getImgPos() {
+      // return if all lazy-blur images loaded
+      if (opt.imgsWithPos && !opt.imgsWithPos.length) {
+        return;
+      }
+
+      opt.imgsWithPos = opt.imgs.map(function (img) {
+        var _rect = img.getBoundingClientRect();
+        var _offsetY = window.pageYOffset;
+        return {
+          imgEl: img,
+          top: _rect.top + _offsetY,
+          bottom: _rect.bottom + _offsetY
+        };
       });
-      break;
+    };
 
-    case 'scroll':
-      var getImgPos = function getImgPos() {
-        // return if all lazy-blur images loaded
-        if (opt.imgsWithPos && !opt.imgsWithPos.length) {
-          return;
-        }
+    var detectImgsAreInViewport = function detectImgsAreInViewport() {
+      // return if all imgs loaded
+      if (!opt.imgsWithPos.length) {
+        return;
+      }
 
-        opt.imgsWithPos = opt.imgs.map(function (img) {
-          var _rect = img.getBoundingClientRect();
-          var _offsetY = window.pageYOffset;
-          return {
-            imgEl: img,
-            top: _rect.top + _offsetY,
-            bottom: _rect.bottom + _offsetY
-          };
-        });
-      };
+      var _offsetY = window.pageYOffset;
+      var _vpTop = _offsetY - opt.scrollThreshold;
+      var _vpBottom = _offsetY + window.innerHeight + opt.scrollThreshold;
 
-      var detectImgsAreInViewport = function detectImgsAreInViewport() {
-        // return if all imgs loaded
-        if (!opt.imgsWithPos.length) {
-          return;
+      opt.imgsWithPos = opt.imgsWithPos.filter(function (imgData, idx) {
+        var isInVp = imgData.bottom < _vpBottom && imgData.bottom > _vpTop || imgData.top > _vpTop && imgData.top < _vpBottom;
+
+        if (isInVp) {
+          appendSrcImg(imgData.imgEl);
         }
 
-        var _offsetY = window.pageYOffset;
-        var _vpTop = _offsetY - opt.scrollThreshold;
-        var _vpBottom = _offsetY + window.innerHeight + opt.scrollThreshold;
+        return !isInVp;
+      });
+    };
 
-        opt.imgsWithPos = opt.imgsWithPos.filter(function (imgData, idx) {
-          var isInVp = imgData.bottom < _vpBottom && imgData.bottom > _vpTop || imgData.top > _vpTop && imgData.top < _vpBottom;
+    getImgPos();
+    detectImgsAreInViewport();
 
-          if (isInVp) {
-            appendSrcImg(imgData.imgEl);
-          }
+    window.addEventListener('scroll', function () {
+      detectImgsAreInViewport();
+    });
 
-          return !isInVp;
-        });
-      };
-
+    window.addEventListener('resize', function () {
       getImgPos();
       detectImgsAreInViewport();
+    });
+  };
 
-      window.addEventListener('scroll', function () {
-        detectImgsAreInViewport();
+  // events for loading img
+  switch (opt.eventType) {
+    case 'click':
+    case 'mouseenter':
+      opt.imgs.map(function (img) {
+        img.addEventListener(opt.eventType, bindManualEvent);
       });
+      break;
 
-      window.addEventListener('resize', function () {
-        getImgPos();
-        detectImgsAreInViewport();
-      });
+    case 'scroll':
+      bindScrollEvent();
       break;
   }
 };

dist/lazy-blur.min.js

 /*!
- * lazy-blur.js 0.1.6 - Progressive image loader with SVG blur effect
+ * lazy-blur.js 0.1.7 - Progressive image loader with SVG blur effect
  * Copyright (c) 2016 Rplus - https://github.com/Rplus/lazy-blur.js
  * License: MIT
  */
-"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},LazyBlur=function e(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(_classCallCheck(this,e),t.imgSQuery=t.imgSQuery||".lazy-blur__imgS",t=_extends({imgLClass:"lazy-blur__imgL",filterSelector:"html.svg *:not(.done) > "+t.imgSQuery,getImgLSrc:function(e){return e.getAttribute("data-src")},onLoad:function(e){e.parentElement.className+=" done "},blurSize:20,scrollThreshold:50,eventType:"scroll"},t),t.imgs=[].slice.call(document.querySelectorAll(t.imgSQuery)),t.imgs.length){"function"!=typeof t.onLoad&&(t.onLoad=!1);var n='\n    <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;">\n      <def>\n        <filter id="lazy-blur-filter">\n          <feGaussianBlur stdDeviation="'+t.blurSize+'"></feGaussianBlur>\n        </filter>\n      </def>\n    </svg>\n    <style>\n      '+t.filterSelector+' {\n        -webkit-filter: url("#lazy-blur-filter");\n                filter: url("#lazy-blur-filter");\n      }\n    </style>';document.body.appendChild(function(){var e=document.createElement("div");return e.innerHTML=n,e}());var r=function(e){i(e.target)},i=function(e){var n=new Image;t.onLoad&&(n.onload=function(){t.onLoad(e)}),n.className=t.imgLClass,n.src=t.getImgLSrc(e),e.parentNode.insertBefore(n,e.nextSibling),"scroll"!==t.eventType&&e.removeEventListener(t.eventType,r)};switch(t.eventType){case"click":case"mouseenter":t.imgs.map(function(e){e.addEventListener(t.eventType,r)});break;case"scroll":var o=function(){(!t.imgsWithPos||t.imgsWithPos.length)&&(t.imgsWithPos=t.imgs.map(function(e){var t=e.getBoundingClientRect(),n=window.pageYOffset;return{imgEl:e,top:t.top+n,bottom:t.bottom+n}}))},l=function(){if(t.imgsWithPos.length){var e=window.pageYOffset,n=e-t.scrollThreshold,r=e+window.innerHeight+t.scrollThreshold;t.imgsWithPos=t.imgsWithPos.filter(function(e,t){var o=e.bottom<r&&e.bottom>n||e.top>n&&e.top<r;return o&&i(e.imgEl),!o})}};o(),l(),window.addEventListener("scroll",function(){l()}),window.addEventListener("resize",function(){o(),l()})}}};
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},LazyBlur=function e(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(_classCallCheck(this,e),t.imgSQuery=t.imgSQuery||".lazy-blur__imgS",t=_extends({imgLClass:"lazy-blur__imgL",filterSelector:"html.svg *:not(.done) > "+t.imgSQuery,getImgLSrc:function(e){return e.getAttribute("data-src")},onLoad:function(e){e.parentElement.className+=" done "},blurSize:20,scrollThreshold:50,eventType:"scroll"},t),t.imgs=[].slice.call(document.querySelectorAll(t.imgSQuery)),t.imgs.length){"function"!=typeof t.onLoad&&(t.onLoad=!1);var n='\n    <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;">\n      <def>\n        <filter id="lazy-blur-filter">\n          <feGaussianBlur stdDeviation="'+t.blurSize+'"></feGaussianBlur>\n        </filter>\n      </def>\n    </svg>\n    <style>\n      '+t.filterSelector+' {\n        -webkit-filter: url("#lazy-blur-filter");\n                filter: url("#lazy-blur-filter");\n      }\n    </style>';document.body.appendChild(function(){var e=document.createElement("div");return e.innerHTML=n,e}());var r=function(e){i(e.target)},i=function(e){var n=new Image;t.onLoad&&(n.onload=function(){t.onLoad(e)}),n.className=t.imgLClass,n.src=t.getImgLSrc(e),e.parentNode.insertBefore(n,e.nextSibling),"scroll"!==t.eventType&&e.removeEventListener(t.eventType,r)},o=function(){var e=function(){(!t.imgsWithPos||t.imgsWithPos.length)&&(t.imgsWithPos=t.imgs.map(function(e){var t=e.getBoundingClientRect(),n=window.pageYOffset;return{imgEl:e,top:t.top+n,bottom:t.bottom+n}}))},n=function(){if(t.imgsWithPos.length){var e=window.pageYOffset,n=e-t.scrollThreshold,r=e+window.innerHeight+t.scrollThreshold;t.imgsWithPos=t.imgsWithPos.filter(function(e,t){var o=e.bottom<r&&e.bottom>n||e.top>n&&e.top<r;return o&&i(e.imgEl),!o})}};e(),n(),window.addEventListener("scroll",function(){n()}),window.addEventListener("resize",function(){e(),n()})};switch(t.eventType){case"click":case"mouseenter":t.imgs.map(function(e){e.addEventListener(t.eventType,r)});break;case"scroll":o()}}};
 //# sourceMappingURL=maps/lazy-blur.min.js.map

package.json

 {
   "name": "lazy-blur.js",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Progressive image loader with SVG blur effect",
@@ -5,0 +5,0 @@ "main": "dist/lazy-blur.min.js",

README.md

@@ -10,3 +10,3 @@ # lazy-blur.js
 * [Demo page](http://rplus.github.io/lazy-blur.js/demo.html)
-* [try it on jsbin](http://jsbin.com/tuhoha/edit)
+* [try it on jsbin](https://jsbin.com/tuhoha/6/edit)
 
@@ -13,0 +13,0 @@ ## Usage

src/lazy-blur.js

@@ -100,58 +100,62 @@ /* global Image */
 
-    // events for loading img
-    switch (opt.eventType) {
-      case 'click':
-      case 'mouseenter':
-        opt.imgs.map(img => {
-          img.addEventListener(opt.eventType, bindManualEvent);
+    let bindScrollEvent = () => {
+      let getImgPos = () => {
+        // return if all lazy-blur images loaded
+        if (opt.imgsWithPos && !opt.imgsWithPos.length) { return; }
+
+        opt.imgsWithPos = opt.imgs.map(img => {
+          let _rect = img.getBoundingClientRect();
+          let _offsetY = window.pageYOffset;
+          return {
+            imgEl: img,
+            top: _rect.top + _offsetY,
+            bottom: _rect.bottom + _offsetY
+          };
         });
-        break;
+      };
 
-      case 'scroll':
-        let getImgPos = () => {
-          // return if all lazy-blur images loaded
-          if (opt.imgsWithPos && !opt.imgsWithPos.length) { return; }
+      let detectImgsAreInViewport = () => {
+        // return if all imgs loaded
+        if (!opt.imgsWithPos.length) { return; }
 
-          opt.imgsWithPos = opt.imgs.map(img => {
-            let _rect = img.getBoundingClientRect();
-            let _offsetY = window.pageYOffset;
-            return {
-              imgEl: img,
-              top: _rect.top + _offsetY,
-              bottom: _rect.bottom + _offsetY
-            };
-          });
-        };
+        let _offsetY = window.pageYOffset;
+        let _vpTop = _offsetY - opt.scrollThreshold;
+        let _vpBottom = _offsetY + window.innerHeight + opt.scrollThreshold;
 
-        let detectImgsAreInViewport = () => {
-          // return if all imgs loaded
-          if (!opt.imgsWithPos.length) { return; }
+        opt.imgsWithPos = opt.imgsWithPos.filter((imgData, idx) => {
+          let isInVp = (imgData.bottom < _vpBottom && imgData.bottom > _vpTop) ||
+                       (imgData.top > _vpTop && imgData.top < _vpBottom);
 
-          let _offsetY = window.pageYOffset;
-          let _vpTop = _offsetY - opt.scrollThreshold;
-          let _vpBottom = _offsetY + window.innerHeight + opt.scrollThreshold;
+          if (isInVp) {
+            appendSrcImg(imgData.imgEl);
+          }
 
-          opt.imgsWithPos = opt.imgsWithPos.filter((imgData, idx) => {
-            let isInVp = (imgData.bottom < _vpBottom && imgData.bottom > _vpTop) ||
-                         (imgData.top > _vpTop && imgData.top < _vpBottom);
+          return !isInVp;
+        });
+      };
 
-            if (isInVp) {
-              appendSrcImg(imgData.imgEl);
-            }
+      getImgPos();
+      detectImgsAreInViewport();
 
-            return !isInVp;
-          });
-        };
+      window.addEventListener('scroll', () => {
+        detectImgsAreInViewport();
+      });
 
+      window.addEventListener('resize', () => {
         getImgPos();
         detectImgsAreInViewport();
+      });
+    };
 
-        window.addEventListener('scroll', () => {
-          detectImgsAreInViewport();
+    // events for loading img
+    switch (opt.eventType) {
+      case 'click':
+      case 'mouseenter':
+        opt.imgs.map(img => {
+          img.addEventListener(opt.eventType, bindManualEvent);
         });
+        break;
 
-        window.addEventListener('resize', () => {
-          getImgPos();
-          detectImgsAreInViewport();
-        });
+      case 'scroll':
+        bindScrollEvent();
         break;
@@ -158,0 +162,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

27686

increased by0.07%

Lines of code

366

increased by1.67%

No dependency changes