lazy-attr - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

lazy-attr.js

 /**
  * https://github.com/yoannchb-pro/Lazy-attr
- * VERSION: 1.0.4
+ * VERSION: 1.0.5
  */
@@ -37,3 +37,3 @@
         //version
-        version: "1.0.4"
+        version: "1.0.5"
     }
@@ -44,2 +44,6 @@ }
 window.addEventListener('load', () => {
+    //Function to display error and info
+    const displayInfo = m => console.log(`[INFO] Lazy-attr : ${m}`);
+    const displayError = m => console.error(`[ERROR] Lazy-attr : ${m}`);
+
     let callback = (entries, observer) => {
@@ -58,22 +62,50 @@ entries.forEach(entry => {
 
-                const startAnimation = () => {
-                    //Animation class
-                    let animationClass = target.getAttribute('lazy-animation');
-                    let pointer = target.getAttribute('lazy-animation-pointer');
-                    if(pointer && animationClass){
-                        let t = document.querySelectorAll(pointer);
-                        t.forEach(e => {
-                            e.classList.add(animationClass);
-                        });
-                    } else {
-                        if(animationClass) target.classList.add(animationClass);
+
+                //Run or pause animation function
+                const animationState = (e, m) => {
+                    e.style.animationPlayState = m;
+                    e.webkitAnimationPlayState = m;
+                };
+
+                //Animation class
+                let animationClass = target.getAttribute('lazy-animation');
+                let pointer = target.getAttribute('lazy-animation-pointer');
+                const targetAnimation = [];
+                if(pointer && animationClass){
+                    let t = document.querySelectorAll(pointer);
+                    t.forEach(e => {
+                        e.classList.add(animationClass);
+                        animationState(e, "paused");
+                        targetAnimation.push(e);
+                    });
+                } else {
+                    if(animationClass){
+                        target.classList.add(animationClass);
+                        animationState(target, "paused");
+                        targetAnimation.push(target);
                     }
+                }
 
-                    if(target.getAttribute('lazy-reset') === null){ //Used to reload animation on scroll
+                //Start animation function after load element if it is lazy or not
+                //document.querySelector('img').style.animationPlayState .webkitAnimationPlayState
+                const startAnimation = () => {
+                    targetAnimation.forEach(e => {
+                        animationState(e, "running");
+                    });
+
+                    if(target.getAttribute('lazy-reset') === null){ //Used to don't reload animation on scroll
                         target.removeAttribute('lazy-animation');
                     }
                 }
-                if(target.complete || !target.getAttribute("lazy-src")) startAnimation(); else {
+
+                let loadedImg = target.complete && target.naturalHeight !== 0;
+                let loadedVideo = target.readyState >=0; //>=3
+                let loaded = loadedImg || loadedVideo;
+                if(loaded || !target.getAttribute("lazy-src")) startAnimation(); else {
+                    target.addEventListener('error', () => {
+                        startAnimation();
+                        displayError("cannot load url " + target.src);
+                    });
                     target.addEventListener('load', startAnimation);
-                    target.addEventListener('loadeddata', startAnimation);
+                    //target.addEventListener('loadeddata', startAnimation);
                 }
@@ -129,18 +161,22 @@
 
-    //Observer
-    let observer = new IntersectionObserver(callback, window.lazy().options);
+    //Get available
+    if(window.IntersectionObserver && window.lazy()){
+        //Observer
+        let observer = new IntersectionObserver(callback, window.lazy().options);
 
-    //Set observer on dom elements
-    const getLazyObject = () => {
-        document.body.querySelectorAll(window.lazy().parameters.join(',')).forEach(e => {
-            observer.observe(e);
-        });
+        //Set observer on dom elements
+        const getLazyObject = () => {
+            document.body.querySelectorAll(window.lazy().parameters.join(',')).forEach(e => {
+                observer.observe(e);
+            });
+        }
+        document.addEventListener("DOMNodeInserted", getLazyObject);
+        getLazyObject();
+
+        //Info
+        displayInfo('version ' + window.lazy().version);
+    } else {
+        //Error
+        displayError('incompatible or verify window.lazy integration');
     }
-    document.addEventListener("DOMNodeInserted", getLazyObject);
-    getLazyObject();
-
-    //Display info
-    const displayInfo = m => console.log(`[INFO] Lazy - ${m}`);
-    displayInfo('configuration have been lauch');
-    displayInfo('version ' + window.lazy().version);
 });

lazy-attr.min.js

@@ -1,1 +0,1 @@
-window.lazy=(()=>({parameters:["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]"],animations:["zoomin","zoomout","opacity","from-left","from-right","from-bottom","from-top","shake","rotate","blur","rotate3d","rotate3d-up"],options:{root:null,rootMargin:"0px",threshold:0},version:"1.0.4"})),window.addEventListener("load",()=>{let t=new IntersectionObserver((t,e)=>{t.forEach(t=>{const a=t.target;if(t.isIntersecting){let t=a.getAttribute("lazy-animation-time");t&&(a.style.animationDuration=`${t}s`);let o=a.getAttribute("lazy-animation-delay");o&&(a.style.animationDelay=`${o}s`);const i=()=>{let t=a.getAttribute("lazy-animation"),e=a.getAttribute("lazy-animation-pointer");e&&t?document.querySelectorAll(e).forEach(e=>{e.classList.add(t)}):t&&a.classList.add(t),null===a.getAttribute("lazy-reset")&&a.removeAttribute("lazy-animation")};a.complete||!a.getAttribute("lazy-src")?i():(a.addEventListener("load",i),a.addEventListener("loadeddata",i));let r=a.getAttribute("lazy-video");r&&a.setAttribute("poster",r),a.preload="none";let n=a.getAttribute("lazy-embed");if(n){let t=a.getAttribute("lazy-poster");t=t?`url('${t}')`:"#000",a.setAttribute("srcdoc",`<style>body{background: ${t}; 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>\n                    <a href='${n}'><span>▶</span></a>`)}let l=a.getAttribute("lazy-src");l&&(a.src=l),a.removeAttribute("lazy-embed"),a.removeAttribute("lazy-poster"),a.removeAttribute("lazy-video"),a.removeAttribute("lazy-animation-time"),a.removeAttribute("lazy-src"),null===a.getAttribute("lazy-reset")&&e.unobserve(a)}else if(null!=a.getAttribute("lazy-reset")){let t=a.getAttribute("lazy-animation"),e=a.getAttribute("lazy-animation-pointer");e&&t?document.querySelectorAll(e).forEach(e=>{e.classList.remove(t)}):t&&a.classList.remove(t),a.getAttribute("lazy-animation-delay")&&(a.style.animationDelay="")}})},window.lazy().options);const e=()=>{document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach(e=>{t.observe(e)})};document.addEventListener("DOMNodeInserted",e),e();const a=t=>console.log(`[INFO] Lazy - ${t}`);a("configuration have been lauch"),a("version "+window.lazy().version)});
+window.lazy=(()=>({parameters:["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]"],animations:["zoomin","zoomout","opacity","from-left","from-right","from-bottom","from-top","shake","rotate","blur","rotate3d","rotate3d-up"],options:{root:null,rootMargin:"0px",threshold:0},version:"1.0.5"})),window.addEventListener("load",()=>{const t=t=>console.error(`[ERROR] Lazy-attr : ${t}`);let e=(e,a)=>{e.forEach(e=>{const o=e.target;if(e.isIntersecting){let e=o.getAttribute("lazy-animation-time");e&&(o.style.animationDuration=`${e}s`);let i=o.getAttribute("lazy-animation-delay");i&&(o.style.animationDelay=`${i}s`);const r=(t,e)=>{t.style.animationPlayState=e,t.webkitAnimationPlayState=e};let n=o.getAttribute("lazy-animation"),l=o.getAttribute("lazy-animation-pointer");const s=[];if(l&&n){document.querySelectorAll(l).forEach(t=>{t.classList.add(n),r(t,"paused"),s.push(t)})}else n&&(o.classList.add(n),r(o,"paused"),s.push(o));const y=()=>{s.forEach(t=>{r(t,"running")}),null===o.getAttribute("lazy-reset")&&o.removeAttribute("lazy-animation")};let d=o.complete&&0!==o.naturalHeight,m=o.readyState>=0;d||m||!o.getAttribute("lazy-src")?y():(o.addEventListener("error",()=>{y(),t("cannot load url "+o.src)}),o.addEventListener("load",y));let u=o.getAttribute("lazy-video");u&&o.setAttribute("poster",u),o.preload="none";let c=o.getAttribute("lazy-embed");if(c){let t=o.getAttribute("lazy-poster");t=t?`url('${t}')`:"#000",o.setAttribute("srcdoc",`<style>body{background: ${t}; 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>\n                    <a href='${c}'><span>▶</span></a>`)}let b=o.getAttribute("lazy-src");b&&(o.src=b),o.removeAttribute("lazy-embed"),o.removeAttribute("lazy-poster"),o.removeAttribute("lazy-video"),o.removeAttribute("lazy-animation-time"),o.removeAttribute("lazy-src"),null===o.getAttribute("lazy-reset")&&a.unobserve(o)}else if(null!=o.getAttribute("lazy-reset")){let t=o.getAttribute("lazy-animation"),e=o.getAttribute("lazy-animation-pointer");if(e&&t){document.querySelectorAll(e).forEach(e=>{e.classList.remove(t)})}else t&&o.classList.remove(t);o.getAttribute("lazy-animation-delay")&&(o.style.animationDelay="")}})};if(window.IntersectionObserver&&window.lazy()){let t=new IntersectionObserver(e,window.lazy().options);const a=()=>{document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach(e=>{t.observe(e)})};document.addEventListener("DOMNodeInserted",a),a(),(t=>console.log(`[INFO] Lazy-attr : ${t}`))("version "+window.lazy().version)}else t("incompatible or verify window.lazy integration")});

package.json

 {
   "name": "lazy-attr",
-  "version": "1.0.4",
-  "description": "Make a lazy page with lazy video, embed, image and animation on scrolling.",
+  "version": "1.0.5",
+  "description": "Make a lazy page with lazy video, embed, image and animations on scrolling.",
   "main": "lazy-attr.js",
@@ -6,0 +6,0 @@ "scripts": {

README.md

@@ -1,2 +0,2 @@
-# 📖 Lazy-attr v1.0.4 - beta
+# 📖 Lazy-attr v1.0.5 - beta
 Create lazy image, embed, video... Make animation on lazy and not lazy element. All of that just with html attributes.
@@ -6,3 +6,3 @@ ## 🎉 Update
 The project is in beta so don't worry for bugs
-- New attributes lazy-animation-pointer
+- New attributes : lazy-animation-pointer
 - New animations
@@ -14,2 +14,5 @@ - New documentation
 - Video bugs correction
+- Video animation correction
+- Image loading animation correction
+- Handle error
 - min files added
@@ -26,4 +29,4 @@ ## 📚 Documentation
 <!-- or -->
-<script src="https://cdn.jsdelivr.net/npm/lazy-attr@1.0.3/lazy-attr.min.js"></script>
-<link src="https://cdn.jsdelivr.net/npm/lazy-attr@1.0.3/lazy-attr-animation.min.css"/>
+<script src="https://cdn.jsdelivr.net/npm/lazy-attr@1.0.5/lazy-attr.min.js"></script>
+<link src="https://cdn.jsdelivr.net/npm/lazy-attr@1.0.5/lazy-attr-animation.min.css"/>
 ```
@@ -30,0 +33,0 @@ ## 🐱 Github and NPM

No alert changes

Improved metrics

Total package byte prevSize

1031562

increased by0.21%

Lines of code

808

increased by3.99%

Number of lines in readme file

35

increased by9.38%

No dependency changes