lazy-attr - npm Package Compare versions

Comparing version 1.1.7 to 1.1.8

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 1.1.8
+- BUGS correction
+- Skeleton class added `lazy-skeleton`, `lazy-skeleton-corner` and `lazy-skeleton-top`
+- `lazy-background` added to make lazy background
+
 ## 1.1.7
@@ -7,0 +12,0 @@ - BUGS correction from last version

dist/lazy-attr.cjs.js

@@ -87,3 +87,3 @@ 'use strict';
 
-var lazyParameters = ["[lazy-reset]", "[lazy-animation]", "[lazy-animation-time]", "[lazy-animation-delay]", "[lazy-src]", "[lazy-video]", "[lazy-embed]", "[lazy-animation-pointer]", "[lazy-animation-function]", "[lazy-animation-count]", "[lazy-callback]", "[lazy-srcset]", "[lazy-poster]", "[lazy-size-width]", "[lazy-size-height]"];
+var lazyParameters = ["[lazy-reset]", "[lazy-animation]", "[lazy-animation-time]", "[lazy-animation-delay]", "[lazy-src]", "[lazy-video]", "[lazy-embed]", "[lazy-animation-pointer]", "[lazy-animation-function]", "[lazy-animation-count]", "[lazy-callback]", "[lazy-srcset]", "[lazy-poster]", "[lazy-size-width]", "[lazy-size-height]", "[lazy-background]"];
 
@@ -212,5 +212,5 @@ var lazyAnimations = ["zoomin", "zoomout", "opacity", "slide-left", "slide-right", "slide-bottom", "slide-top", "corner-top-left", "corner-top-right", "corner-bottom-left", "corner-bottom-right", "shake", "rotate", "blur", "flip", "flip-up"];
     //version
-    version: "1.1.7",
+    version: "1.1.8",
     //version matcher
-    versionMatcher: "[#version]1.1.7[#version]"
+    versionMatcher: "[#version]1.1.8[#version]"
   };
@@ -374,3 +374,3 @@ }
           var callbackFunction = target.getAttribute('lazy-callback');
-          if (callbackFunction) window[callbackFunction]();
+          if (callbackFunction) window[callbackFunction](target);
         }; //Set class on lazy element
@@ -399,5 +399,22 @@
 
-        if (loaded || !target.getAttribute("lazy-src")) {
+        if (loaded || !target.getAttribute("lazy-src") && !target.getAttribute('lazy-srcset') && !target.getAttribute('lazy-background')) {
           loadedFunction();
           startAnimation();
+        } else if (target.getAttribute('lazy-background')) {
+          //Lazy-background
+          var srcBackground = target.getAttribute('lazy-background');
+
+          if (srcBackground) {
+            var cacheImg = new Image();
+            cacheImg.src = srcBackground;
+            cacheImg.addEventListener('error', function () {
+              startAnimation();
+              displayError("cannot load url " + target.src);
+            });
+            cacheImg.addEventListener('load', function () {
+              target.style.backgroundImage = "url('" + cacheImg.src + "')";
+              loadedFunction();
+              startAnimation();
+            });
+          }
         } else {
@@ -449,2 +466,4 @@ target.addEventListener('error', function () {
         target.removeAttribute('lazy-src');
+        target.removeAttribute('lazy-srcset');
+        target.removeAttribute('lazy-background');
 
@@ -451,0 +470,0 @@ if (target.getAttribute('lazy-reset') === null) {

dist/lazy-attr.cjs.min.js

@@ -1,1 +0,1 @@
-"use strict";function IntersectionObserverPolyfill(t,e){this.callback=t,this.elements=[],this.options=e,window.lazyDatas.originalObserver=!1,this.initObs=function(){var e=this;function n(){var n=[];e.elements.forEach((function(t){var e=window.lazy().isIntersecting(t);n.push({target:t,isIntersecting:e})})),t(n,e)}this.listener=n;var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame;i?function t(){n(),i(t)}():setInterval(n,100)},this.observe=function(t){t&&this.elements.push(t)},this.unobserve=function(t){if(t){var e=this.elements.indexOf(t);-1!=e&&this.elements.splice(e,1)}},this.initObs()}function getUpdateLazyAttr(t){var e=new XMLHttpRequest;e.onload=function(){var n=e.responseText,i="[#version]",a=n.substring(n.indexOf(i)+i.length);a=(a=a.substring(a.indexOf(i)+i.length)).substring(0,a.indexOf(i)),t({error:!1,version:a})},e.onerror=function(){t({error:!0,content:"Error while fetching"})},e.open("GET",window.lazyDatas.updateURL),e.send()}var lazyParameters=["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]","[lazy-animation-function]","[lazy-animation-count]","[lazy-callback]","[lazy-srcset]","[lazy-poster]","[lazy-size-width]","[lazy-size-height]"],lazyAnimations=["zoomin","zoomout","opacity","slide-left","slide-right","slide-bottom","slide-top","corner-top-left","corner-top-right","corner-bottom-left","corner-bottom-right","shake","rotate","blur","flip","flip-up"];function lazyGlobal(){return{_data:window.lazyDatas,changeAnimation:function(t,e,n){var i=t.getAttribute("lazy-reset");if(i=null!=i&&null!=i){var a=t.getAttribute("lazy-animation");if(a&&e){var o=t.getAttribute("lazy-animation-pointer");o?document.querySelectorAll(o).forEach((function(t){t.classList.remove(a)})):t.classList.remove(a),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),n&&(window.lazy()._data.observer.unobserve(t),window.lazy()._data.observer.observe(t))}else console.warn("Lazy-attr : Cannot change animation of not lazy-reset element !")},getLastVersion:function(t){getUpdateLazyAttr(t)},isIntersecting:function(t){var e=window.innerWidth,n=window.innerHeight,i=t.getBoundingClientRect(),a=!1,o=!1,r=i.top>=0&&i.top<=n,s=i.bottom>=0&&i.bottom<=n,l=i.left>=0&&i.left<=e,u=i.right>=0&&i.right<=e;return(r||s)&&(o=!0),(l||u)&&(a=!0),!(!a||!o)},isIntersectingWithoutTransform:function(t){var e=window.innerWidth,n=window.innerHeight;function i(t){var i=t.offsetParent.getBoundingClientRect(),a=i.left+t.offsetLeft,o=i.top+t.offsetTop,r=o+t.offsetHeight,s=a+t.offsetWidth,l=!1,u=!1;if((o>=0&&o<=n||r>=0&&r<=n)&&(u=!0),(a>=0&&a<=e||s>=0&&s<=e)&&(l=!0),l&&u)return!0}var a=t.getAttribute("lazy-animation-pointer");return i(t)||null!=a&&i(document.querySelector(a))},parameters:lazyParameters,animations:lazyAnimations,options:{root:null,rootMargin:"0px",threshold:0},version:"1.1.7",versionMatcher:"[#version]1.1.7[#version]"}}function lazyMain(){function t(t){console.error("[ERROR] Lazy-attr : "+t)}if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){var e=function(){document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach((function(t){var e=t.getAttribute("lazy-size-width"),i=t.getAttribute("lazy-size-height");e&&(t.style.minWidth=e),i&&(t.style.minHeight=i),n.observe(t)}))},n=new IntersectionObserver((function(e,n){e.forEach((function(e){var i=e.target;if(e.isIntersecting){var a=function(t,e){t.style.animationPlayState=e,t.style.webkitAnimationPlayState=e},o=function(t,e){var n=null;if(window.lazy()._data.originalObserver){var i=t.getAttribute("lazy-animation");i&&e.classList.remove(i)}t.style.minWidth=n,t.style.minHeight=n,a(e,n),t.style.animationDuration=n,t.style.webkitAnimationDuration=n,t.style.animationDelay=n,t.style.webkitAnimationDelay=n,t.style.animationIterationCount=n,t.style.webkitAnimationIterationCount=n,t.style.animationTimingFunction=n,t.style.webkitAnimationTimingFunction=n},r=function(t,e){var n=i.getAttribute("lazy-animation-time");n&&(t.style.animationDuration=n+"s",t.style.webkitAnimationDuration=n+"s");var a=i.getAttribute("lazy-animation-delay");a&&(t.style.animationDelay=a+"s",t.style.webkitAnimationDelay=a+"s");var r=i.getAttribute("lazy-animation-count");r&&(t.style.animationIterationCount=r,t.style.webkitAnimationIterationCount=r);var s=i.getAttribute("lazy-animation-function");s&&(t.style.animationTimingFunction=s,t.style.webkitAnimationTimingFunction=s),t.classList.add(e),null===i.getAttribute("lazy-reset")?t.addEventListener("animationend",(function(){o(i,t),window.lazy().parameters.forEach((function(t){t=t.replace(/(\[|\])/gi,""),i.removeAttribute(t)}))})):t.addEventListener("animationend",(function(){o(i,t)}))},s=[],l=i.getAttribute("lazy-animation"),u=i.getAttribute("lazy-animation-pointer");u&&l?document.querySelectorAll(u).forEach((function(t){r(t,l),a(t,"paused"),s.push(t)})):l&&(r(i,l),a(i,"paused"),s.push(i));var c=i.complete&&0!==i.naturalHeight,y=i.readyState>=0,d=function(){var t=i.getAttribute("lazy-callback");t&&window[t]()},m=function(){s.forEach((function(t){!function(t){-1!=t.classList.toString().indexOf("lazyattr")&&(t.classList.remove("lazyattr"),t.classList.add("lazyloaded"))}(t),a(t,"running")}))};c||y||!i.getAttribute("lazy-src")?(d(),m()):(i.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),i.addEventListener("load",(function(){d(),m()})),i.addEventListener("loadeddata",d));var f=i.getAttribute("lazy-video");f&&i.setAttribute("poster",f),i.preload="none";var b=i.getAttribute("lazy-embed");if(b)if(window.lazy()._data.isIE)i.setAttribute("src",b);else{var z=i.getAttribute("lazy-poster");z=z?"url('"+z+"')":"#000",i.setAttribute("srcdoc","<style>body{background: "+z+"; background-position: center; background-size: cover;}*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href='"+b+"'><span>▶</span></a>")}var w=i.getAttribute("lazy-src");w&&(i.src=w);var v=i.getAttribute("lazy-srcset");v&&i.setAttribute("srcset",v),i.removeAttribute("lazy-embed"),i.removeAttribute("lazy-poster"),i.removeAttribute("lazy-video"),i.removeAttribute("lazy-src"),null===i.getAttribute("lazy-reset")&&n.unobserve(i)}else if(null!=i.getAttribute("lazy-reset")&&!window.lazy().isIntersectingWithoutTransform(i)){var g=function(t,e){e&&t.classList.remove(e)},h=i.getAttribute("lazy-animation"),p=i.getAttribute("lazy-animation-pointer");p&&h?document.querySelectorAll(p).forEach((function(t){g(t,h)})):g(i,h)}}))}),window.lazy().options);window.lazyDatas.observer=n,document.addEventListener("DOMNodeInserted",e),e(),i="version "+window.lazy().version,console.info("[INFO] Lazy-attr : "+i)}else t("incompatible or verify window.lazy and window.lazyDatas integration");var i}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),window.lazyDatas={isIE:!!document.documentMode,updateURL:"https://unpkg.com/lazy-attr@latest/dist/lazy-attr.min.js",originalObserver:!0},window.lazy=lazyGlobal,window.IntersectionObserver||(window.IntersectionObserver=IntersectionObserverPolyfill),window.addEventListener("load",lazyMain);
+"use strict";function IntersectionObserverPolyfill(t,e){this.callback=t,this.elements=[],this.options=e,window.lazyDatas.originalObserver=!1,this.initObs=function(){var e=this;function n(){var n=[];e.elements.forEach((function(t){var e=window.lazy().isIntersecting(t);n.push({target:t,isIntersecting:e})})),t(n,e)}this.listener=n;var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame;i?function t(){n(),i(t)}():setInterval(n,100)},this.observe=function(t){t&&this.elements.push(t)},this.unobserve=function(t){if(t){var e=this.elements.indexOf(t);-1!=e&&this.elements.splice(e,1)}},this.initObs()}function getUpdateLazyAttr(t){var e=new XMLHttpRequest;e.onload=function(){var n=e.responseText,i="[#version]",a=n.substring(n.indexOf(i)+i.length);a=(a=a.substring(a.indexOf(i)+i.length)).substring(0,a.indexOf(i)),t({error:!1,version:a})},e.onerror=function(){t({error:!0,content:"Error while fetching"})},e.open("GET",window.lazyDatas.updateURL),e.send()}var lazyParameters=["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]","[lazy-animation-function]","[lazy-animation-count]","[lazy-callback]","[lazy-srcset]","[lazy-poster]","[lazy-size-width]","[lazy-size-height]","[lazy-background]"],lazyAnimations=["zoomin","zoomout","opacity","slide-left","slide-right","slide-bottom","slide-top","corner-top-left","corner-top-right","corner-bottom-left","corner-bottom-right","shake","rotate","blur","flip","flip-up"];function lazyGlobal(){return{_data:window.lazyDatas,changeAnimation:function(t,e,n){var i=t.getAttribute("lazy-reset");if(i=null!=i&&null!=i){var a=t.getAttribute("lazy-animation");if(a&&e){var o=t.getAttribute("lazy-animation-pointer");o?document.querySelectorAll(o).forEach((function(t){t.classList.remove(a)})):t.classList.remove(a),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),n&&(window.lazy()._data.observer.unobserve(t),window.lazy()._data.observer.observe(t))}else console.warn("Lazy-attr : Cannot change animation of not lazy-reset element !")},getLastVersion:function(t){getUpdateLazyAttr(t)},isIntersecting:function(t){var e=window.innerWidth,n=window.innerHeight,i=t.getBoundingClientRect(),a=!1,o=!1,r=i.top>=0&&i.top<=n,s=i.bottom>=0&&i.bottom<=n,l=i.left>=0&&i.left<=e,u=i.right>=0&&i.right<=e;return(r||s)&&(o=!0),(l||u)&&(a=!0),!(!a||!o)},isIntersectingWithoutTransform:function(t){var e=window.innerWidth,n=window.innerHeight;function i(t){var i=t.offsetParent.getBoundingClientRect(),a=i.left+t.offsetLeft,o=i.top+t.offsetTop,r=o+t.offsetHeight,s=a+t.offsetWidth,l=!1,u=!1;if((o>=0&&o<=n||r>=0&&r<=n)&&(u=!0),(a>=0&&a<=e||s>=0&&s<=e)&&(l=!0),l&&u)return!0}var a=t.getAttribute("lazy-animation-pointer");return i(t)||null!=a&&i(document.querySelector(a))},parameters:lazyParameters,animations:lazyAnimations,options:{root:null,rootMargin:"0px",threshold:0},version:"1.1.8",versionMatcher:"[#version]1.1.8[#version]"}}function lazyMain(){function t(t){console.error("[ERROR] Lazy-attr : "+t)}if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){var e=function(){document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach((function(t){var e=t.getAttribute("lazy-size-width"),i=t.getAttribute("lazy-size-height");e&&(t.style.minWidth=e),i&&(t.style.minHeight=i),n.observe(t)}))},n=new IntersectionObserver((function(e,n){e.forEach((function(e){var i=e.target;if(e.isIntersecting){var a=function(t,e){t.style.animationPlayState=e,t.style.webkitAnimationPlayState=e},o=function(t,e){var n=null;if(window.lazy()._data.originalObserver){var i=t.getAttribute("lazy-animation");i&&e.classList.remove(i)}t.style.minWidth=n,t.style.minHeight=n,a(e,n),t.style.animationDuration=n,t.style.webkitAnimationDuration=n,t.style.animationDelay=n,t.style.webkitAnimationDelay=n,t.style.animationIterationCount=n,t.style.webkitAnimationIterationCount=n,t.style.animationTimingFunction=n,t.style.webkitAnimationTimingFunction=n},r=function(t,e){var n=i.getAttribute("lazy-animation-time");n&&(t.style.animationDuration=n+"s",t.style.webkitAnimationDuration=n+"s");var a=i.getAttribute("lazy-animation-delay");a&&(t.style.animationDelay=a+"s",t.style.webkitAnimationDelay=a+"s");var r=i.getAttribute("lazy-animation-count");r&&(t.style.animationIterationCount=r,t.style.webkitAnimationIterationCount=r);var s=i.getAttribute("lazy-animation-function");s&&(t.style.animationTimingFunction=s,t.style.webkitAnimationTimingFunction=s),t.classList.add(e),null===i.getAttribute("lazy-reset")?t.addEventListener("animationend",(function(){o(i,t),window.lazy().parameters.forEach((function(t){t=t.replace(/(\[|\])/gi,""),i.removeAttribute(t)}))})):t.addEventListener("animationend",(function(){o(i,t)}))},s=[],l=i.getAttribute("lazy-animation"),u=i.getAttribute("lazy-animation-pointer");u&&l?document.querySelectorAll(u).forEach((function(t){r(t,l),a(t,"paused"),s.push(t)})):l&&(r(i,l),a(i,"paused"),s.push(i));var c=i.complete&&0!==i.naturalHeight,y=i.readyState>=0,d=function(){var t=i.getAttribute("lazy-callback");t&&window[t](i)},m=function(){s.forEach((function(t){!function(t){-1!=t.classList.toString().indexOf("lazyattr")&&(t.classList.remove("lazyattr"),t.classList.add("lazyloaded"))}(t),a(t,"running")}))};if(c||y||!i.getAttribute("lazy-src")&&!i.getAttribute("lazy-srcset")&&!i.getAttribute("lazy-background"))d(),m();else if(i.getAttribute("lazy-background")){var b=i.getAttribute("lazy-background");if(b){var f=new Image;f.src=b,f.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),f.addEventListener("load",(function(){i.style.backgroundImage="url('"+f.src+"')",d(),m()}))}}else i.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),i.addEventListener("load",(function(){d(),m()})),i.addEventListener("loadeddata",d);var z=i.getAttribute("lazy-video");z&&i.setAttribute("poster",z),i.preload="none";var g=i.getAttribute("lazy-embed");if(g)if(window.lazy()._data.isIE)i.setAttribute("src",g);else{var v=i.getAttribute("lazy-poster");v=v?"url('"+v+"')":"#000",i.setAttribute("srcdoc","<style>body{background: "+v+"; background-position: center; background-size: cover;}*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href='"+g+"'><span>▶</span></a>")}var w=i.getAttribute("lazy-src");w&&(i.src=w);var h=i.getAttribute("lazy-srcset");h&&i.setAttribute("srcset",h),i.removeAttribute("lazy-embed"),i.removeAttribute("lazy-poster"),i.removeAttribute("lazy-video"),i.removeAttribute("lazy-src"),i.removeAttribute("lazy-srcset"),i.removeAttribute("lazy-background"),null===i.getAttribute("lazy-reset")&&n.unobserve(i)}else if(null!=i.getAttribute("lazy-reset")&&!window.lazy().isIntersectingWithoutTransform(i)){var p=function(t,e){e&&t.classList.remove(e)},A=i.getAttribute("lazy-animation"),L=i.getAttribute("lazy-animation-pointer");L&&A?document.querySelectorAll(L).forEach((function(t){p(t,A)})):p(i,A)}}))}),window.lazy().options);window.lazyDatas.observer=n,document.addEventListener("DOMNodeInserted",e),e(),i="version "+window.lazy().version,console.info("[INFO] Lazy-attr : "+i)}else t("incompatible or verify window.lazy and window.lazyDatas integration");var i}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),window.lazyDatas={isIE:!!document.documentMode,updateURL:"https://unpkg.com/lazy-attr@latest/dist/lazy-attr.min.js",originalObserver:!0},window.lazy=lazyGlobal,window.IntersectionObserver||(window.IntersectionObserver=IntersectionObserverPolyfill),window.addEventListener("load",lazyMain);

dist/lazy-attr.esm.js

@@ -85,3 +85,3 @@ function IntersectionObserverPolyfill(callback, options) {
 
-var lazyParameters = ["[lazy-reset]", "[lazy-animation]", "[lazy-animation-time]", "[lazy-animation-delay]", "[lazy-src]", "[lazy-video]", "[lazy-embed]", "[lazy-animation-pointer]", "[lazy-animation-function]", "[lazy-animation-count]", "[lazy-callback]", "[lazy-srcset]", "[lazy-poster]", "[lazy-size-width]", "[lazy-size-height]"];
+var lazyParameters = ["[lazy-reset]", "[lazy-animation]", "[lazy-animation-time]", "[lazy-animation-delay]", "[lazy-src]", "[lazy-video]", "[lazy-embed]", "[lazy-animation-pointer]", "[lazy-animation-function]", "[lazy-animation-count]", "[lazy-callback]", "[lazy-srcset]", "[lazy-poster]", "[lazy-size-width]", "[lazy-size-height]", "[lazy-background]"];
 
@@ -210,5 +210,5 @@ var lazyAnimations = ["zoomin", "zoomout", "opacity", "slide-left", "slide-right", "slide-bottom", "slide-top", "corner-top-left", "corner-top-right", "corner-bottom-left", "corner-bottom-right", "shake", "rotate", "blur", "flip", "flip-up"];
     //version
-    version: "1.1.7",
+    version: "1.1.8",
     //version matcher
-    versionMatcher: "[#version]1.1.7[#version]"
+    versionMatcher: "[#version]1.1.8[#version]"
   };
@@ -372,3 +372,3 @@ }
           var callbackFunction = target.getAttribute('lazy-callback');
-          if (callbackFunction) window[callbackFunction]();
+          if (callbackFunction) window[callbackFunction](target);
         }; //Set class on lazy element
@@ -397,5 +397,22 @@
 
-        if (loaded || !target.getAttribute("lazy-src")) {
+        if (loaded || !target.getAttribute("lazy-src") && !target.getAttribute('lazy-srcset') && !target.getAttribute('lazy-background')) {
           loadedFunction();
           startAnimation();
+        } else if (target.getAttribute('lazy-background')) {
+          //Lazy-background
+          var srcBackground = target.getAttribute('lazy-background');
+
+          if (srcBackground) {
+            var cacheImg = new Image();
+            cacheImg.src = srcBackground;
+            cacheImg.addEventListener('error', function () {
+              startAnimation();
+              displayError("cannot load url " + target.src);
+            });
+            cacheImg.addEventListener('load', function () {
+              target.style.backgroundImage = "url('" + cacheImg.src + "')";
+              loadedFunction();
+              startAnimation();
+            });
+          }
         } else {
@@ -447,2 +464,4 @@ target.addEventListener('error', function () {
         target.removeAttribute('lazy-src');
+        target.removeAttribute('lazy-srcset');
+        target.removeAttribute('lazy-background');
 
@@ -449,0 +468,0 @@ if (target.getAttribute('lazy-reset') === null) {

dist/lazy-attr.esm.min.js

@@ -1,1 +0,1 @@
-function IntersectionObserverPolyfill(t,e){this.callback=t,this.elements=[],this.options=e,window.lazyDatas.originalObserver=!1,this.initObs=function(){var e=this;function n(){var n=[];e.elements.forEach((function(t){var e=window.lazy().isIntersecting(t);n.push({target:t,isIntersecting:e})})),t(n,e)}this.listener=n;var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame;i?function t(){n(),i(t)}():setInterval(n,100)},this.observe=function(t){t&&this.elements.push(t)},this.unobserve=function(t){if(t){var e=this.elements.indexOf(t);-1!=e&&this.elements.splice(e,1)}},this.initObs()}function getUpdateLazyAttr(t){var e=new XMLHttpRequest;e.onload=function(){var n=e.responseText,i="[#version]",a=n.substring(n.indexOf(i)+i.length);a=(a=a.substring(a.indexOf(i)+i.length)).substring(0,a.indexOf(i)),t({error:!1,version:a})},e.onerror=function(){t({error:!0,content:"Error while fetching"})},e.open("GET",window.lazyDatas.updateURL),e.send()}var lazyParameters=["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]","[lazy-animation-function]","[lazy-animation-count]","[lazy-callback]","[lazy-srcset]","[lazy-poster]","[lazy-size-width]","[lazy-size-height]"],lazyAnimations=["zoomin","zoomout","opacity","slide-left","slide-right","slide-bottom","slide-top","corner-top-left","corner-top-right","corner-bottom-left","corner-bottom-right","shake","rotate","blur","flip","flip-up"];function lazyGlobal(){return{_data:window.lazyDatas,changeAnimation:function(t,e,n){var i=t.getAttribute("lazy-reset");if(i=null!=i&&null!=i){var a=t.getAttribute("lazy-animation");if(a&&e){var o=t.getAttribute("lazy-animation-pointer");o?document.querySelectorAll(o).forEach((function(t){t.classList.remove(a)})):t.classList.remove(a),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),n&&(window.lazy()._data.observer.unobserve(t),window.lazy()._data.observer.observe(t))}else console.warn("Lazy-attr : Cannot change animation of not lazy-reset element !")},getLastVersion:function(t){getUpdateLazyAttr(t)},isIntersecting:function(t){var e=window.innerWidth,n=window.innerHeight,i=t.getBoundingClientRect(),a=!1,o=!1,r=i.top>=0&&i.top<=n,s=i.bottom>=0&&i.bottom<=n,l=i.left>=0&&i.left<=e,u=i.right>=0&&i.right<=e;return(r||s)&&(o=!0),(l||u)&&(a=!0),!(!a||!o)},isIntersectingWithoutTransform:function(t){var e=window.innerWidth,n=window.innerHeight;function i(t){var i=t.offsetParent.getBoundingClientRect(),a=i.left+t.offsetLeft,o=i.top+t.offsetTop,r=o+t.offsetHeight,s=a+t.offsetWidth,l=!1,u=!1;if((o>=0&&o<=n||r>=0&&r<=n)&&(u=!0),(a>=0&&a<=e||s>=0&&s<=e)&&(l=!0),l&&u)return!0}var a=t.getAttribute("lazy-animation-pointer");return i(t)||null!=a&&i(document.querySelector(a))},parameters:lazyParameters,animations:lazyAnimations,options:{root:null,rootMargin:"0px",threshold:0},version:"1.1.7",versionMatcher:"[#version]1.1.7[#version]"}}function lazyMain(){function t(t){console.error("[ERROR] Lazy-attr : "+t)}if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){var e=function(){document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach((function(t){var e=t.getAttribute("lazy-size-width"),i=t.getAttribute("lazy-size-height");e&&(t.style.minWidth=e),i&&(t.style.minHeight=i),n.observe(t)}))},n=new IntersectionObserver((function(e,n){e.forEach((function(e){var i=e.target;if(e.isIntersecting){var a=function(t,e){t.style.animationPlayState=e,t.style.webkitAnimationPlayState=e},o=function(t,e){var n=null;if(window.lazy()._data.originalObserver){var i=t.getAttribute("lazy-animation");i&&e.classList.remove(i)}t.style.minWidth=n,t.style.minHeight=n,a(e,n),t.style.animationDuration=n,t.style.webkitAnimationDuration=n,t.style.animationDelay=n,t.style.webkitAnimationDelay=n,t.style.animationIterationCount=n,t.style.webkitAnimationIterationCount=n,t.style.animationTimingFunction=n,t.style.webkitAnimationTimingFunction=n},r=function(t,e){var n=i.getAttribute("lazy-animation-time");n&&(t.style.animationDuration=n+"s",t.style.webkitAnimationDuration=n+"s");var a=i.getAttribute("lazy-animation-delay");a&&(t.style.animationDelay=a+"s",t.style.webkitAnimationDelay=a+"s");var r=i.getAttribute("lazy-animation-count");r&&(t.style.animationIterationCount=r,t.style.webkitAnimationIterationCount=r);var s=i.getAttribute("lazy-animation-function");s&&(t.style.animationTimingFunction=s,t.style.webkitAnimationTimingFunction=s),t.classList.add(e),null===i.getAttribute("lazy-reset")?t.addEventListener("animationend",(function(){o(i,t),window.lazy().parameters.forEach((function(t){t=t.replace(/(\[|\])/gi,""),i.removeAttribute(t)}))})):t.addEventListener("animationend",(function(){o(i,t)}))},s=[],l=i.getAttribute("lazy-animation"),u=i.getAttribute("lazy-animation-pointer");u&&l?document.querySelectorAll(u).forEach((function(t){r(t,l),a(t,"paused"),s.push(t)})):l&&(r(i,l),a(i,"paused"),s.push(i));var c=i.complete&&0!==i.naturalHeight,y=i.readyState>=0,d=function(){var t=i.getAttribute("lazy-callback");t&&window[t]()},m=function(){s.forEach((function(t){!function(t){-1!=t.classList.toString().indexOf("lazyattr")&&(t.classList.remove("lazyattr"),t.classList.add("lazyloaded"))}(t),a(t,"running")}))};c||y||!i.getAttribute("lazy-src")?(d(),m()):(i.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),i.addEventListener("load",(function(){d(),m()})),i.addEventListener("loadeddata",d));var f=i.getAttribute("lazy-video");f&&i.setAttribute("poster",f),i.preload="none";var b=i.getAttribute("lazy-embed");if(b)if(window.lazy()._data.isIE)i.setAttribute("src",b);else{var z=i.getAttribute("lazy-poster");z=z?"url('"+z+"')":"#000",i.setAttribute("srcdoc","<style>body{background: "+z+"; background-position: center; background-size: cover;}*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href='"+b+"'><span>▶</span></a>")}var w=i.getAttribute("lazy-src");w&&(i.src=w);var v=i.getAttribute("lazy-srcset");v&&i.setAttribute("srcset",v),i.removeAttribute("lazy-embed"),i.removeAttribute("lazy-poster"),i.removeAttribute("lazy-video"),i.removeAttribute("lazy-src"),null===i.getAttribute("lazy-reset")&&n.unobserve(i)}else if(null!=i.getAttribute("lazy-reset")&&!window.lazy().isIntersectingWithoutTransform(i)){var g=function(t,e){e&&t.classList.remove(e)},h=i.getAttribute("lazy-animation"),p=i.getAttribute("lazy-animation-pointer");p&&h?document.querySelectorAll(p).forEach((function(t){g(t,h)})):g(i,h)}}))}),window.lazy().options);window.lazyDatas.observer=n,document.addEventListener("DOMNodeInserted",e),e(),i="version "+window.lazy().version,console.info("[INFO] Lazy-attr : "+i)}else t("incompatible or verify window.lazy and window.lazyDatas integration");var i}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),window.lazyDatas={isIE:!!document.documentMode,updateURL:"https://unpkg.com/lazy-attr@latest/dist/lazy-attr.min.js",originalObserver:!0},window.lazy=lazyGlobal,window.IntersectionObserver||(window.IntersectionObserver=IntersectionObserverPolyfill),window.addEventListener("load",lazyMain);
+function IntersectionObserverPolyfill(t,e){this.callback=t,this.elements=[],this.options=e,window.lazyDatas.originalObserver=!1,this.initObs=function(){var e=this;function n(){var n=[];e.elements.forEach((function(t){var e=window.lazy().isIntersecting(t);n.push({target:t,isIntersecting:e})})),t(n,e)}this.listener=n;var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame;i?function t(){n(),i(t)}():setInterval(n,100)},this.observe=function(t){t&&this.elements.push(t)},this.unobserve=function(t){if(t){var e=this.elements.indexOf(t);-1!=e&&this.elements.splice(e,1)}},this.initObs()}function getUpdateLazyAttr(t){var e=new XMLHttpRequest;e.onload=function(){var n=e.responseText,i="[#version]",a=n.substring(n.indexOf(i)+i.length);a=(a=a.substring(a.indexOf(i)+i.length)).substring(0,a.indexOf(i)),t({error:!1,version:a})},e.onerror=function(){t({error:!0,content:"Error while fetching"})},e.open("GET",window.lazyDatas.updateURL),e.send()}var lazyParameters=["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]","[lazy-animation-function]","[lazy-animation-count]","[lazy-callback]","[lazy-srcset]","[lazy-poster]","[lazy-size-width]","[lazy-size-height]","[lazy-background]"],lazyAnimations=["zoomin","zoomout","opacity","slide-left","slide-right","slide-bottom","slide-top","corner-top-left","corner-top-right","corner-bottom-left","corner-bottom-right","shake","rotate","blur","flip","flip-up"];function lazyGlobal(){return{_data:window.lazyDatas,changeAnimation:function(t,e,n){var i=t.getAttribute("lazy-reset");if(i=null!=i&&null!=i){var a=t.getAttribute("lazy-animation");if(a&&e){var o=t.getAttribute("lazy-animation-pointer");o?document.querySelectorAll(o).forEach((function(t){t.classList.remove(a)})):t.classList.remove(a),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),n&&(window.lazy()._data.observer.unobserve(t),window.lazy()._data.observer.observe(t))}else console.warn("Lazy-attr : Cannot change animation of not lazy-reset element !")},getLastVersion:function(t){getUpdateLazyAttr(t)},isIntersecting:function(t){var e=window.innerWidth,n=window.innerHeight,i=t.getBoundingClientRect(),a=!1,o=!1,r=i.top>=0&&i.top<=n,s=i.bottom>=0&&i.bottom<=n,l=i.left>=0&&i.left<=e,u=i.right>=0&&i.right<=e;return(r||s)&&(o=!0),(l||u)&&(a=!0),!(!a||!o)},isIntersectingWithoutTransform:function(t){var e=window.innerWidth,n=window.innerHeight;function i(t){var i=t.offsetParent.getBoundingClientRect(),a=i.left+t.offsetLeft,o=i.top+t.offsetTop,r=o+t.offsetHeight,s=a+t.offsetWidth,l=!1,u=!1;if((o>=0&&o<=n||r>=0&&r<=n)&&(u=!0),(a>=0&&a<=e||s>=0&&s<=e)&&(l=!0),l&&u)return!0}var a=t.getAttribute("lazy-animation-pointer");return i(t)||null!=a&&i(document.querySelector(a))},parameters:lazyParameters,animations:lazyAnimations,options:{root:null,rootMargin:"0px",threshold:0},version:"1.1.8",versionMatcher:"[#version]1.1.8[#version]"}}function lazyMain(){function t(t){console.error("[ERROR] Lazy-attr : "+t)}if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){var e=function(){document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach((function(t){var e=t.getAttribute("lazy-size-width"),i=t.getAttribute("lazy-size-height");e&&(t.style.minWidth=e),i&&(t.style.minHeight=i),n.observe(t)}))},n=new IntersectionObserver((function(e,n){e.forEach((function(e){var i=e.target;if(e.isIntersecting){var a=function(t,e){t.style.animationPlayState=e,t.style.webkitAnimationPlayState=e},o=function(t,e){var n=null;if(window.lazy()._data.originalObserver){var i=t.getAttribute("lazy-animation");i&&e.classList.remove(i)}t.style.minWidth=n,t.style.minHeight=n,a(e,n),t.style.animationDuration=n,t.style.webkitAnimationDuration=n,t.style.animationDelay=n,t.style.webkitAnimationDelay=n,t.style.animationIterationCount=n,t.style.webkitAnimationIterationCount=n,t.style.animationTimingFunction=n,t.style.webkitAnimationTimingFunction=n},r=function(t,e){var n=i.getAttribute("lazy-animation-time");n&&(t.style.animationDuration=n+"s",t.style.webkitAnimationDuration=n+"s");var a=i.getAttribute("lazy-animation-delay");a&&(t.style.animationDelay=a+"s",t.style.webkitAnimationDelay=a+"s");var r=i.getAttribute("lazy-animation-count");r&&(t.style.animationIterationCount=r,t.style.webkitAnimationIterationCount=r);var s=i.getAttribute("lazy-animation-function");s&&(t.style.animationTimingFunction=s,t.style.webkitAnimationTimingFunction=s),t.classList.add(e),null===i.getAttribute("lazy-reset")?t.addEventListener("animationend",(function(){o(i,t),window.lazy().parameters.forEach((function(t){t=t.replace(/(\[|\])/gi,""),i.removeAttribute(t)}))})):t.addEventListener("animationend",(function(){o(i,t)}))},s=[],l=i.getAttribute("lazy-animation"),u=i.getAttribute("lazy-animation-pointer");u&&l?document.querySelectorAll(u).forEach((function(t){r(t,l),a(t,"paused"),s.push(t)})):l&&(r(i,l),a(i,"paused"),s.push(i));var c=i.complete&&0!==i.naturalHeight,y=i.readyState>=0,d=function(){var t=i.getAttribute("lazy-callback");t&&window[t](i)},m=function(){s.forEach((function(t){!function(t){-1!=t.classList.toString().indexOf("lazyattr")&&(t.classList.remove("lazyattr"),t.classList.add("lazyloaded"))}(t),a(t,"running")}))};if(c||y||!i.getAttribute("lazy-src")&&!i.getAttribute("lazy-srcset")&&!i.getAttribute("lazy-background"))d(),m();else if(i.getAttribute("lazy-background")){var b=i.getAttribute("lazy-background");if(b){var f=new Image;f.src=b,f.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),f.addEventListener("load",(function(){i.style.backgroundImage="url('"+f.src+"')",d(),m()}))}}else i.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),i.addEventListener("load",(function(){d(),m()})),i.addEventListener("loadeddata",d);var z=i.getAttribute("lazy-video");z&&i.setAttribute("poster",z),i.preload="none";var g=i.getAttribute("lazy-embed");if(g)if(window.lazy()._data.isIE)i.setAttribute("src",g);else{var v=i.getAttribute("lazy-poster");v=v?"url('"+v+"')":"#000",i.setAttribute("srcdoc","<style>body{background: "+v+"; background-position: center; background-size: cover;}*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href='"+g+"'><span>▶</span></a>")}var w=i.getAttribute("lazy-src");w&&(i.src=w);var h=i.getAttribute("lazy-srcset");h&&i.setAttribute("srcset",h),i.removeAttribute("lazy-embed"),i.removeAttribute("lazy-poster"),i.removeAttribute("lazy-video"),i.removeAttribute("lazy-src"),i.removeAttribute("lazy-srcset"),i.removeAttribute("lazy-background"),null===i.getAttribute("lazy-reset")&&n.unobserve(i)}else if(null!=i.getAttribute("lazy-reset")&&!window.lazy().isIntersectingWithoutTransform(i)){var p=function(t,e){e&&t.classList.remove(e)},A=i.getAttribute("lazy-animation"),L=i.getAttribute("lazy-animation-pointer");L&&A?document.querySelectorAll(L).forEach((function(t){p(t,A)})):p(i,A)}}))}),window.lazy().options);window.lazyDatas.observer=n,document.addEventListener("DOMNodeInserted",e),e(),i="version "+window.lazy().version,console.info("[INFO] Lazy-attr : "+i)}else t("incompatible or verify window.lazy and window.lazyDatas integration");var i}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),window.lazyDatas={isIE:!!document.documentMode,updateURL:"https://unpkg.com/lazy-attr@latest/dist/lazy-attr.min.js",originalObserver:!0},window.lazy=lazyGlobal,window.IntersectionObserver||(window.IntersectionObserver=IntersectionObserverPolyfill),window.addEventListener("load",lazyMain);

dist/lazy-attr.js

@@ -90,3 +90,3 @@ (function (factory) {
 
-    var lazyParameters = ["[lazy-reset]", "[lazy-animation]", "[lazy-animation-time]", "[lazy-animation-delay]", "[lazy-src]", "[lazy-video]", "[lazy-embed]", "[lazy-animation-pointer]", "[lazy-animation-function]", "[lazy-animation-count]", "[lazy-callback]", "[lazy-srcset]", "[lazy-poster]", "[lazy-size-width]", "[lazy-size-height]"];
+    var lazyParameters = ["[lazy-reset]", "[lazy-animation]", "[lazy-animation-time]", "[lazy-animation-delay]", "[lazy-src]", "[lazy-video]", "[lazy-embed]", "[lazy-animation-pointer]", "[lazy-animation-function]", "[lazy-animation-count]", "[lazy-callback]", "[lazy-srcset]", "[lazy-poster]", "[lazy-size-width]", "[lazy-size-height]", "[lazy-background]"];
 
@@ -215,5 +215,5 @@ var lazyAnimations = ["zoomin", "zoomout", "opacity", "slide-left", "slide-right", "slide-bottom", "slide-top", "corner-top-left", "corner-top-right", "corner-bottom-left", "corner-bottom-right", "shake", "rotate", "blur", "flip", "flip-up"];
         //version
-        version: "1.1.7",
+        version: "1.1.8",
         //version matcher
-        versionMatcher: "[#version]1.1.7[#version]"
+        versionMatcher: "[#version]1.1.8[#version]"
       };
@@ -377,3 +377,3 @@ }
               var callbackFunction = target.getAttribute('lazy-callback');
-              if (callbackFunction) window[callbackFunction]();
+              if (callbackFunction) window[callbackFunction](target);
             }; //Set class on lazy element
@@ -402,5 +402,22 @@
 
-            if (loaded || !target.getAttribute("lazy-src")) {
+            if (loaded || !target.getAttribute("lazy-src") && !target.getAttribute('lazy-srcset') && !target.getAttribute('lazy-background')) {
               loadedFunction();
               startAnimation();
+            } else if (target.getAttribute('lazy-background')) {
+              //Lazy-background
+              var srcBackground = target.getAttribute('lazy-background');
+
+              if (srcBackground) {
+                var cacheImg = new Image();
+                cacheImg.src = srcBackground;
+                cacheImg.addEventListener('error', function () {
+                  startAnimation();
+                  displayError("cannot load url " + target.src);
+                });
+                cacheImg.addEventListener('load', function () {
+                  target.style.backgroundImage = "url('" + cacheImg.src + "')";
+                  loadedFunction();
+                  startAnimation();
+                });
+              }
             } else {
@@ -452,2 +469,4 @@ target.addEventListener('error', function () {
             target.removeAttribute('lazy-src');
+            target.removeAttribute('lazy-srcset');
+            target.removeAttribute('lazy-background');
 
@@ -454,0 +473,0 @@ if (target.getAttribute('lazy-reset') === null) {

dist/lazy-attr.min.js

@@ -1,1 +0,1 @@
-!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";var t=["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]","[lazy-animation-function]","[lazy-animation-count]","[lazy-callback]","[lazy-srcset]","[lazy-poster]","[lazy-size-width]","[lazy-size-height]"],e=["zoomin","zoomout","opacity","slide-left","slide-right","slide-bottom","slide-top","corner-top-left","corner-top-right","corner-bottom-left","corner-bottom-right","shake","rotate","blur","flip","flip-up"];window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),window.lazyDatas={isIE:!!document.documentMode,updateURL:"https://unpkg.com/lazy-attr@latest/dist/lazy-attr.min.js",originalObserver:!0},window.lazy=function(){return{_data:window.lazyDatas,changeAnimation:function(t,e,n){var i=t.getAttribute("lazy-reset");if(i=null!=i&&null!=i){var o=t.getAttribute("lazy-animation");if(o&&e){var a=t.getAttribute("lazy-animation-pointer");a?document.querySelectorAll(a).forEach((function(t){t.classList.remove(o)})):t.classList.remove(o),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),n&&(window.lazy()._data.observer.unobserve(t),window.lazy()._data.observer.observe(t))}else console.warn("Lazy-attr : Cannot change animation of not lazy-reset element !")},getLastVersion:function(t){!function(t){var e=new XMLHttpRequest;e.onload=function(){var n=e.responseText,i="[#version]",o=n.substring(n.indexOf(i)+i.length);o=(o=o.substring(o.indexOf(i)+i.length)).substring(0,o.indexOf(i)),t({error:!1,version:o})},e.onerror=function(){t({error:!0,content:"Error while fetching"})},e.open("GET",window.lazyDatas.updateURL),e.send()}(t)},isIntersecting:function(t){var e=window.innerWidth,n=window.innerHeight,i=t.getBoundingClientRect(),o=!1,a=!1,r=i.top>=0&&i.top<=n,s=i.bottom>=0&&i.bottom<=n,l=i.left>=0&&i.left<=e,u=i.right>=0&&i.right<=e;return(r||s)&&(a=!0),(l||u)&&(o=!0),!(!o||!a)},isIntersectingWithoutTransform:function(t){var e=window.innerWidth,n=window.innerHeight;function i(t){var i=t.offsetParent.getBoundingClientRect(),o=i.left+t.offsetLeft,a=i.top+t.offsetTop,r=a+t.offsetHeight,s=o+t.offsetWidth,l=!1,u=!1;if((a>=0&&a<=n||r>=0&&r<=n)&&(u=!0),(o>=0&&o<=e||s>=0&&s<=e)&&(l=!0),l&&u)return!0}var o=t.getAttribute("lazy-animation-pointer");return i(t)||null!=o&&i(document.querySelector(o))},parameters:t,animations:e,options:{root:null,rootMargin:"0px",threshold:0},version:"1.1.7",versionMatcher:"[#version]1.1.7[#version]"}},window.IntersectionObserver||(window.IntersectionObserver=function(t,e){this.callback=t,this.elements=[],this.options=e,window.lazyDatas.originalObserver=!1,this.initObs=function(){var e=this;function n(){var n=[];e.elements.forEach((function(t){var e=window.lazy().isIntersecting(t);n.push({target:t,isIntersecting:e})})),t(n,e)}this.listener=n;var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame;i?function t(){n(),i(t)}():setInterval(n,100)},this.observe=function(t){t&&this.elements.push(t)},this.unobserve=function(t){if(t){var e=this.elements.indexOf(t);-1!=e&&this.elements.splice(e,1)}},this.initObs()}),window.addEventListener("load",(function(){function t(t){console.error("[ERROR] Lazy-attr : "+t)}if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){var e=function(){document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach((function(t){var e=t.getAttribute("lazy-size-width"),i=t.getAttribute("lazy-size-height");e&&(t.style.minWidth=e),i&&(t.style.minHeight=i),n.observe(t)}))},n=new IntersectionObserver((function(e,n){e.forEach((function(e){var i=e.target;if(e.isIntersecting){var o=function(t,e){t.style.animationPlayState=e,t.style.webkitAnimationPlayState=e},a=function(t,e){var n=null;if(window.lazy()._data.originalObserver){var i=t.getAttribute("lazy-animation");i&&e.classList.remove(i)}t.style.minWidth=n,t.style.minHeight=n,o(e,n),t.style.animationDuration=n,t.style.webkitAnimationDuration=n,t.style.animationDelay=n,t.style.webkitAnimationDelay=n,t.style.animationIterationCount=n,t.style.webkitAnimationIterationCount=n,t.style.animationTimingFunction=n,t.style.webkitAnimationTimingFunction=n},r=function(t,e){var n=i.getAttribute("lazy-animation-time");n&&(t.style.animationDuration=n+"s",t.style.webkitAnimationDuration=n+"s");var o=i.getAttribute("lazy-animation-delay");o&&(t.style.animationDelay=o+"s",t.style.webkitAnimationDelay=o+"s");var r=i.getAttribute("lazy-animation-count");r&&(t.style.animationIterationCount=r,t.style.webkitAnimationIterationCount=r);var s=i.getAttribute("lazy-animation-function");s&&(t.style.animationTimingFunction=s,t.style.webkitAnimationTimingFunction=s),t.classList.add(e),null===i.getAttribute("lazy-reset")?t.addEventListener("animationend",(function(){a(i,t),window.lazy().parameters.forEach((function(t){t=t.replace(/(\[|\])/gi,""),i.removeAttribute(t)}))})):t.addEventListener("animationend",(function(){a(i,t)}))},s=[],l=i.getAttribute("lazy-animation"),u=i.getAttribute("lazy-animation-pointer");u&&l?document.querySelectorAll(u).forEach((function(t){r(t,l),o(t,"paused"),s.push(t)})):l&&(r(i,l),o(i,"paused"),s.push(i));var c=i.complete&&0!==i.naturalHeight,d=i.readyState>=0,y=function(){var t=i.getAttribute("lazy-callback");t&&window[t]()},m=function(){s.forEach((function(t){!function(t){-1!=t.classList.toString().indexOf("lazyattr")&&(t.classList.remove("lazyattr"),t.classList.add("lazyloaded"))}(t),o(t,"running")}))};c||d||!i.getAttribute("lazy-src")?(y(),m()):(i.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),i.addEventListener("load",(function(){y(),m()})),i.addEventListener("loadeddata",y));var f=i.getAttribute("lazy-video");f&&i.setAttribute("poster",f),i.preload="none";var b=i.getAttribute("lazy-embed");if(b)if(window.lazy()._data.isIE)i.setAttribute("src",b);else{var w=i.getAttribute("lazy-poster");w=w?"url('"+w+"')":"#000",i.setAttribute("srcdoc","<style>body{background: "+w+"; background-position: center; background-size: cover;}*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href='"+b+"'><span>▶</span></a>")}var v=i.getAttribute("lazy-src");v&&(i.src=v);var z=i.getAttribute("lazy-srcset");z&&i.setAttribute("srcset",z),i.removeAttribute("lazy-embed"),i.removeAttribute("lazy-poster"),i.removeAttribute("lazy-video"),i.removeAttribute("lazy-src"),null===i.getAttribute("lazy-reset")&&n.unobserve(i)}else if(null!=i.getAttribute("lazy-reset")&&!window.lazy().isIntersectingWithoutTransform(i)){var g=function(t,e){e&&t.classList.remove(e)},h=i.getAttribute("lazy-animation"),p=i.getAttribute("lazy-animation-pointer");p&&h?document.querySelectorAll(p).forEach((function(t){g(t,h)})):g(i,h)}}))}),window.lazy().options);window.lazyDatas.observer=n,document.addEventListener("DOMNodeInserted",e),e(),i="version "+window.lazy().version,console.info("[INFO] Lazy-attr : "+i)}else t("incompatible or verify window.lazy and window.lazyDatas integration");var i}))}));
+!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";var t=["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]","[lazy-animation-function]","[lazy-animation-count]","[lazy-callback]","[lazy-srcset]","[lazy-poster]","[lazy-size-width]","[lazy-size-height]","[lazy-background]"],e=["zoomin","zoomout","opacity","slide-left","slide-right","slide-bottom","slide-top","corner-top-left","corner-top-right","corner-bottom-left","corner-bottom-right","shake","rotate","blur","flip","flip-up"];window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),window.lazyDatas={isIE:!!document.documentMode,updateURL:"https://unpkg.com/lazy-attr@latest/dist/lazy-attr.min.js",originalObserver:!0},window.lazy=function(){return{_data:window.lazyDatas,changeAnimation:function(t,e,n){var i=t.getAttribute("lazy-reset");if(i=null!=i&&null!=i){var a=t.getAttribute("lazy-animation");if(a&&e){var o=t.getAttribute("lazy-animation-pointer");o?document.querySelectorAll(o).forEach((function(t){t.classList.remove(a)})):t.classList.remove(a),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),n&&(window.lazy()._data.observer.unobserve(t),window.lazy()._data.observer.observe(t))}else console.warn("Lazy-attr : Cannot change animation of not lazy-reset element !")},getLastVersion:function(t){!function(t){var e=new XMLHttpRequest;e.onload=function(){var n=e.responseText,i="[#version]",a=n.substring(n.indexOf(i)+i.length);a=(a=a.substring(a.indexOf(i)+i.length)).substring(0,a.indexOf(i)),t({error:!1,version:a})},e.onerror=function(){t({error:!0,content:"Error while fetching"})},e.open("GET",window.lazyDatas.updateURL),e.send()}(t)},isIntersecting:function(t){var e=window.innerWidth,n=window.innerHeight,i=t.getBoundingClientRect(),a=!1,o=!1,r=i.top>=0&&i.top<=n,s=i.bottom>=0&&i.bottom<=n,l=i.left>=0&&i.left<=e,u=i.right>=0&&i.right<=e;return(r||s)&&(o=!0),(l||u)&&(a=!0),!(!a||!o)},isIntersectingWithoutTransform:function(t){var e=window.innerWidth,n=window.innerHeight;function i(t){var i=t.offsetParent.getBoundingClientRect(),a=i.left+t.offsetLeft,o=i.top+t.offsetTop,r=o+t.offsetHeight,s=a+t.offsetWidth,l=!1,u=!1;if((o>=0&&o<=n||r>=0&&r<=n)&&(u=!0),(a>=0&&a<=e||s>=0&&s<=e)&&(l=!0),l&&u)return!0}var a=t.getAttribute("lazy-animation-pointer");return i(t)||null!=a&&i(document.querySelector(a))},parameters:t,animations:e,options:{root:null,rootMargin:"0px",threshold:0},version:"1.1.8",versionMatcher:"[#version]1.1.8[#version]"}},window.IntersectionObserver||(window.IntersectionObserver=function(t,e){this.callback=t,this.elements=[],this.options=e,window.lazyDatas.originalObserver=!1,this.initObs=function(){var e=this;function n(){var n=[];e.elements.forEach((function(t){var e=window.lazy().isIntersecting(t);n.push({target:t,isIntersecting:e})})),t(n,e)}this.listener=n;var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame;i?function t(){n(),i(t)}():setInterval(n,100)},this.observe=function(t){t&&this.elements.push(t)},this.unobserve=function(t){if(t){var e=this.elements.indexOf(t);-1!=e&&this.elements.splice(e,1)}},this.initObs()}),window.addEventListener("load",(function(){function t(t){console.error("[ERROR] Lazy-attr : "+t)}if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){var e=function(){document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach((function(t){var e=t.getAttribute("lazy-size-width"),i=t.getAttribute("lazy-size-height");e&&(t.style.minWidth=e),i&&(t.style.minHeight=i),n.observe(t)}))},n=new IntersectionObserver((function(e,n){e.forEach((function(e){var i=e.target;if(e.isIntersecting){var a=function(t,e){t.style.animationPlayState=e,t.style.webkitAnimationPlayState=e},o=function(t,e){var n=null;if(window.lazy()._data.originalObserver){var i=t.getAttribute("lazy-animation");i&&e.classList.remove(i)}t.style.minWidth=n,t.style.minHeight=n,a(e,n),t.style.animationDuration=n,t.style.webkitAnimationDuration=n,t.style.animationDelay=n,t.style.webkitAnimationDelay=n,t.style.animationIterationCount=n,t.style.webkitAnimationIterationCount=n,t.style.animationTimingFunction=n,t.style.webkitAnimationTimingFunction=n},r=function(t,e){var n=i.getAttribute("lazy-animation-time");n&&(t.style.animationDuration=n+"s",t.style.webkitAnimationDuration=n+"s");var a=i.getAttribute("lazy-animation-delay");a&&(t.style.animationDelay=a+"s",t.style.webkitAnimationDelay=a+"s");var r=i.getAttribute("lazy-animation-count");r&&(t.style.animationIterationCount=r,t.style.webkitAnimationIterationCount=r);var s=i.getAttribute("lazy-animation-function");s&&(t.style.animationTimingFunction=s,t.style.webkitAnimationTimingFunction=s),t.classList.add(e),null===i.getAttribute("lazy-reset")?t.addEventListener("animationend",(function(){o(i,t),window.lazy().parameters.forEach((function(t){t=t.replace(/(\[|\])/gi,""),i.removeAttribute(t)}))})):t.addEventListener("animationend",(function(){o(i,t)}))},s=[],l=i.getAttribute("lazy-animation"),u=i.getAttribute("lazy-animation-pointer");u&&l?document.querySelectorAll(u).forEach((function(t){r(t,l),a(t,"paused"),s.push(t)})):l&&(r(i,l),a(i,"paused"),s.push(i));var c=i.complete&&0!==i.naturalHeight,d=i.readyState>=0,y=function(){var t=i.getAttribute("lazy-callback");t&&window[t](i)},m=function(){s.forEach((function(t){!function(t){-1!=t.classList.toString().indexOf("lazyattr")&&(t.classList.remove("lazyattr"),t.classList.add("lazyloaded"))}(t),a(t,"running")}))};if(c||d||!i.getAttribute("lazy-src")&&!i.getAttribute("lazy-srcset")&&!i.getAttribute("lazy-background"))y(),m();else if(i.getAttribute("lazy-background")){var f=i.getAttribute("lazy-background");if(f){var b=new Image;b.src=f,b.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),b.addEventListener("load",(function(){i.style.backgroundImage="url('"+b.src+"')",y(),m()}))}}else i.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),i.addEventListener("load",(function(){y(),m()})),i.addEventListener("loadeddata",y);var g=i.getAttribute("lazy-video");g&&i.setAttribute("poster",g),i.preload="none";var z=i.getAttribute("lazy-embed");if(z)if(window.lazy()._data.isIE)i.setAttribute("src",z);else{var v=i.getAttribute("lazy-poster");v=v?"url('"+v+"')":"#000",i.setAttribute("srcdoc","<style>body{background: "+v+"; background-position: center; background-size: cover;}*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href='"+z+"'><span>▶</span></a>")}var w=i.getAttribute("lazy-src");w&&(i.src=w);var h=i.getAttribute("lazy-srcset");h&&i.setAttribute("srcset",h),i.removeAttribute("lazy-embed"),i.removeAttribute("lazy-poster"),i.removeAttribute("lazy-video"),i.removeAttribute("lazy-src"),i.removeAttribute("lazy-srcset"),i.removeAttribute("lazy-background"),null===i.getAttribute("lazy-reset")&&n.unobserve(i)}else if(null!=i.getAttribute("lazy-reset")&&!window.lazy().isIntersectingWithoutTransform(i)){var p=function(t,e){e&&t.classList.remove(e)},A=i.getAttribute("lazy-animation"),L=i.getAttribute("lazy-animation-pointer");L&&A?document.querySelectorAll(L).forEach((function(t){p(t,A)})):p(i,A)}}))}),window.lazy().options);window.lazyDatas.observer=n,document.addEventListener("DOMNodeInserted",e),e(),i="version "+window.lazy().version,console.info("[INFO] Lazy-attr : "+i)}else t("incompatible or verify window.lazy and window.lazyDatas integration");var i}))}));

package.json

 {
   "name": "lazy-attr",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "Create lazy image, iframe, video... Make custom animation on lazy and not lazy element on all browser. You can also use our animations included in the lib. All of that just with html attributes.",
@@ -37,2 +37,4 @@ "main": "./dist/lazy-attr.min.js",
     "angular",
+    "skeleton",
+    "background",
     "node",
@@ -50,4 +52,7 @@ "npm"
     "@rollup/plugin-node-resolve": "^11.1.1",
-    "babel-preset-env": "^1.7.0"
+    "autoprefixer": "^10.2.4",
+    "babel-preset-env": "^1.7.0",
+    "postcss-cli": "^8.3.1",
+    "rollup": "^2.39.0"
   }
 }

README.md

@@ -1,3 +0,5 @@
-# 📖 Lazy-attr v1.1.7
+# 📖 Lazy-attr v1.1.8
 
+[![npm](https://img.shields.io/badge/npm-download-green)](https://www.npmjs.com/package/lazy-attr) [![Download](https://img.shields.io/badge/github-download-gree)](https://github.com/yoannchb-pro/Lazy-attr)
+
 Create lazy image, iframe, video... Make custom animation on lazy and not lazy element on all browser. You can also use our animations included in the lib ([Demo](https://yoannchb-pro.github.io/Lazy-attr/index.html#toanimate)). All of that just with html attributes.
@@ -15,14 +17,10 @@
 
-- BUGS correction from last update
+- BUGS correction
+- Skeleton class added `lazy-skeleton`, `lazy-skeleton-corner` and `lazy-skeleton-top`
+- `lazy-background` added to make lazy background
 
-## 🐱 Github and NPM
----
-
-- [GITHUB](https://github.com/yoannchb-pro/Lazy-attr)
-- [NPM](https://www.npmjs.com/package/lazy-attr)
-
 ## 📚 Documentation & Demo
 ---
 
-- [Website](https://yoannchb-pro.github.io/Lazy-attr/index.html)
+- [Github website documentation and demo](https://yoannchb-pro.github.io/Lazy-attr/index.html)
 
@@ -38,4 +36,4 @@ ## 💻 Import
 ```html
-<script src="https://unpkg.com/lazy-attr@1.1.7/dist/lazy-attr.min.js" type="text/javascript"></script>
-<link href="https://unpkg.com/lazy-attr@1.1.7/dist/lazy-attr-animation.min.css" rel="stylesheet"/>
+<script src="https://unpkg.com/lazy-attr@1.1.8/dist/lazy-attr.min.js" type="text/javascript"></script>
+<link href="https://unpkg.com/lazy-attr@1.1.8/dist/lazy-attr-animation.min.css" rel="stylesheet"/>
 ```
@@ -53,2 +51,3 @@
 - You can set a class `lazyattr` wich be transform in `lazyloaded` after the element is loaded (work on the pointer and parent)
+- You can make a beatiful skeleton loader with `lazy-skeleton`, `lazy-skeleton-corner` and `lazy-skeleton-top` class
 
@@ -58,44 +57,40 @@ ## Attributes
 
-### Image, iframe and video
-- Reset the animation each time the element match the screen
-```json
-lazy-reset
-```
-- source set
-```json
-lazy-srcset="same as srcset attribute"
-lazy-src="img src | video src | iframe src"
-```
-- define size (you set a default size with the class `lazyattr` wich will be transform into `lazyloaded`)
-```json
-lazy-size-width="min width size"
-lazy-size-height="min height size"
-```
-- callback function
-```json
-lazy-callback="function after the lazy is loaded"
-```
-- animations
-```json
-lazy-animation="animation name"
-lazy-animation-time="animation duration / time in ms"
-lazy-animation-delay="animation delay / time in ms"
-lazy-animation-pointer="animation pointer / class | id | ..."
-lazy-animation-function="animation timing function / exp: linear"
-lazy-animation-count="animation repeatition / exp: infinite"
-```
+## Image, iframe and video
+|        Parameters        |                                             Usage                                            |
+|:-----------------------:|:--------------------------------------------------------------------------------------------:|
+| lazy-reset              | Reset the animation on scroll                                                                |
+| lazy-srcset             | Same as srcset attribute                                                                     |
+| lazy-src                | Image soucre \| iframe source \| video source                                                |
+| lazy-background         | Image source to make a lazy background image                                                 |
+| lazy-size-width         | Minimum width size                                                                           |
+| lazy-size-height        | Minimum height size                                                                          |
+| lazy-callback           | Function name lauched after full load of element                                             |
+| lazy-animation          | Animation to lauch after full load of element                                                |
+| lazy-animation-time     | Animation duration (time in ms)                                                              |
+| lazy-animation-delay    | Animation delay (time in ms)                                                                 |
+| lazy-animation-pointer  | Wich element will be animated after the  lazy element is load (expl: "#id", ".class", "tag") |
+| lazy-animation-function | Animation timing function like css                                                           |
+| lazy-animation-count    | Animation repeatition like css (expl: infinite)                                              |
 
-### Video
-- Put a poster on a video
-```json
-lazy-video="put a poster while the user dont click on the video / link of the poster image"
-```
+## Video
+|  Parameters |                      Usage                      |
+|:----------:|:-----------------------------------------------:|
+| lazy-video | Put a poster while user dont click on the video |
 
 ### Iframe / Embed
-- Load iframe and put poster
-```json
-lazy-embed="link of the iframe"
-lazy-poster="put a poster while the user dont click on the video / link of the poster image"
-```
+|  Parameters  |                      Usage                      |
+|:-----------:|:-----------------------------------------------:|
+| lazy-embed  | Iframe link                                     |
+| lazy-poster | Put a poster while user dont click on the video |
 
+## Methods
+---
+## window.lazy()
+|         Parameters        |                   Usage                  |
+|:------------------------:|:----------------------------------------:|
+| version                  | Get actual version of lazy-attr          |
+| parameters               | Get all possible attributes of lazy-attr |
+| animations               | Get all animation prefix                 |
+| getLastVersion(callback) | Get lastversion of lazy-attr             |
+
 ## Animations
@@ -102,0 +97,0 @@ ---

src/js/lazy-attr.global.js

@@ -131,6 +131,6 @@ import getUpdateLazyAttr from "./lazy-attr.update";
         //version
-        version: "1.1.7",
+        version: "1.1.8",
         //version matcher
-        versionMatcher: "[#version]1.1.7[#version]" 
+        versionMatcher: "[#version]1.1.8[#version]" 
     }
 }

src/js/lazy-attr.main.js

@@ -157,3 +157,3 @@ export default function lazyMain(){
                     const callbackFunction = target.getAttribute('lazy-callback');
-                    if(callbackFunction) window[callbackFunction]();
+                    if(callbackFunction) window[callbackFunction](target);
                 }
@@ -180,3 +180,3 @@
 
-                if(loaded || !target.getAttribute("lazy-src")) {
+                if(loaded || (!target.getAttribute("lazy-src") && !target.getAttribute('lazy-srcset') && !target.getAttribute('lazy-background'))) {
 
@@ -186,3 +186,19 @@ loadedFunction();
 
-                 } else {
+                } else if(target.getAttribute('lazy-background')){
+                    //Lazy-background
+                    const srcBackground = target.getAttribute('lazy-background');
+                    if(srcBackground) {
+                        const cacheImg = new Image();
+                        cacheImg.src = srcBackground;
+                        cacheImg.addEventListener('error', function(){
+                            startAnimation();
+                            displayError("cannot load url " + target.src);
+                        });
+                        cacheImg.addEventListener('load', () => {
+                            target.style.backgroundImage = "url('" + cacheImg.src + "')";
+                            loadedFunction();
+                            startAnimation();
+                        });
+                    }
+                } else {
 
@@ -239,2 +255,4 @@ target.addEventListener('error', function(){
                 target.removeAttribute('lazy-src');
+                target.removeAttribute('lazy-srcset');
+                target.removeAttribute('lazy-background');
 
@@ -241,0 +259,0 @@ if(target.getAttribute('lazy-reset') === null){ //Used to reload animation on scroll

src/js/lazy-attr.parameters.js

@@ -17,4 +17,5 @@ const lazyParameters = [
     "[lazy-size-height]",
+    "[lazy-background]"
 ];
 
 export default lazyParameters;

No alert changes

Improved metrics

Total package byte prevSize

1113773

increased by1.22%

Lines of code

2957

increased by7.84%

Worsened metrics

Dependency count

6

increased by100%

Number of lines in readme file

123

decreased by-3.91%

Dependency changes

• + Addedautoprefixer@^10.2.4

• + Addedpostcss-cli@^8.3.1

• + Addedrollup@^2.39.0

• + Added@nodelib/fs.scandir@2.1.5(transitive)

• + Added@nodelib/fs.stat@2.0.5(transitive)

• + Added@nodelib/fs.walk@1.2.8(transitive)

• + Addedansi-regex@5.0.1(transitive)

• + Addedansi-styles@4.3.0(transitive)

• + Addedanymatch@3.1.3(transitive)

• + Addedarray-union@2.1.0(transitive)

• + Addedat-least-node@1.0.0(transitive)

• + Addedautoprefixer@10.4.19(transitive)

• + Addedbinary-extensions@2.3.0(transitive)

• + Addedbraces@3.0.3(transitive)

• + Addedchalk@4.1.2(transitive)

• + Addedchokidar@3.6.0(transitive)

• + Addedcliui@7.0.4(transitive)

• + Addedcolor-convert@2.0.1(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addeddependency-graph@0.9.0(transitive)

• + Addeddir-glob@3.0.1(transitive)

• + Addedemoji-regex@8.0.0(transitive)

• + Addedfast-glob@3.3.2(transitive)

• + Addedfastq@1.17.1(transitive)

• + Addedfill-range@7.1.1(transitive)

• + Addedfraction.js@4.3.7(transitive)

• + Addedfs-extra@9.1.0(transitive)

• + Addedget-caller-file@2.0.5(transitive)

• + Addedget-stdin@8.0.0(transitive)

• + Addedglob-parent@5.1.2(transitive)

• + Addedglobby@11.1.0(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addedhas-flag@4.0.0(transitive)

• + Addedignore@5.3.1(transitive)

• + Addedis-binary-path@2.1.0(transitive)

• + Addedis-extglob@2.1.1(transitive)

• + Addedis-fullwidth-code-point@3.0.0(transitive)

• + Addedis-glob@4.0.3(transitive)

• + Addedjsonfile@6.1.0(transitive)

• + Addedlilconfig@2.1.0(transitive)

• + Addedmerge2@1.4.1(transitive)

• + Addedmicromatch@4.0.6(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addednormalize-path@3.0.0(transitive)

• + Addednormalize-range@0.1.2(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicomatch@4.0.2(transitive)

• + Addedpify@2.3.0(transitive)

• + Addedpostcss@8.4.38(transitive)

• + Addedpostcss-cli@8.3.1(transitive)

• + Addedpostcss-load-config@3.1.4(transitive)

• + Addedpostcss-reporter@7.1.0(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedpretty-hrtime@1.0.3(transitive)

• + Addedqueue-microtask@1.2.3(transitive)

• + Addedread-cache@1.0.0(transitive)

• + Addedreaddirp@3.6.0(transitive)

• + Addedrequire-directory@2.1.1(transitive)

• + Addedreusify@1.0.4(transitive)

• + Addedrun-parallel@1.2.0(transitive)

• + Addedslash@3.0.0(transitive)

• + Addedsource-map-js@1.2.0(transitive)

• + Addedstring-width@4.2.3(transitive)

• + Addedstrip-ansi@6.0.1(transitive)

• + Addedsupports-color@7.2.0(transitive)

• + Addedthenby@1.3.4(transitive)

• + Addeduniversalify@2.0.1(transitive)

• + Addedwrap-ansi@7.0.0(transitive)

• + Addedy18n@5.0.8(transitive)

• + Addedyaml@1.10.2(transitive)

• + Addedyargs@16.2.0(transitive)

• + Addedyargs-parser@20.2.9(transitive)