From f2061a7b2a784c829edf87b986b623c5aac995b5 Mon Sep 17 00:00:00 2001
From: Pablo <42.pablo.ms@gmail.com>
Date: Fri, 13 Mar 2020 22:42:54 +0100
Subject: [PATCH] Replace old lazyload library for native lazy loading

---
 index.html | 104 ++++++++++++++++++++++++++---------------------------
 js/main.js |  50 --------------------------
 2 files changed, 52 insertions(+), 102 deletions(-)

diff --git a/index.html b/index.html
index 3b72240..be40af6 100644
--- a/index.html
+++ b/index.html
@@ -32,10 +32,10 @@
   <section class="navigation">
       <div class="nav-container">
         <div class="brand">
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/Logo-invert.webp">
             <source type="image/png" srcset="img/Logo-invert.png">
-            <img  data-src="img/Logo-invert.png" style="width: 100px;">
+            <img loading="lazy" src="img/Logo-invert.png" style="width: 100px;">
           </picture>
         </div>
         <nav>
@@ -127,104 +127,104 @@
     <div class="bgallery">
       <div class="gallery">
         <div class="column-gallery">
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/junction2018.webp">
             <source type="image/jpeg" srcset="img/junction2018.jpg">
-              <img  data-src="img/junction2018.jpg">
+            <img loading="lazy" src="img/junction2018.jpg">
           </picture>
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/santi.webp">
             <source type="image/jpeg" srcset="img/santi.jpg">
-              <img  data-src="img/santi.jpg">
+            <img loading="lazy" loading="lazy" src="img/santi.jpg">
           </picture>
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/kids.webp">
             <source type="image/jpeg" srcset="img/kids.jpg">
-            <img  data-src="img/kids.jpg">
+            <img loading="lazy" src="img/kids.jpg">
           </picture>
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/sec.webp">
             <source type="image/jpeg" srcset="img/sec.jpg">
-            <img  data-src="img/sec.jpg">
+            <img loading="lazy" src="img/sec.jpg">
           </picture>
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/junction2018-1.webp">
             <source type="image/jpeg" srcset="img/junction2018-1.jpg">
-            <img  data-src="img/junction2018-1.jpg">
+            <img loading="lazy" src="img/junction2018-1.jpg">
           </picture>   
         </div>
         
         <div class="column-gallery">
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/app.webp">
             <source type="image/jpeg" srcset="img/app.jpg">
-            <img  data-src="img/app.jpg">
+            <img loading="lazy" src="img/app.jpg">
           </picture>  
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/bitup.webp">
             <source type="image/jpeg" srcset="img/bitup.jpg">
-            <img  data-src="img/bitup.jpg">
+            <img loading="lazy" src="img/bitup.jpg">
           </picture>  
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/soldadura.webp">
             <source type="image/jpeg" srcset="img/soldadura.jpg">
-            <img  data-src="img/soldadura.jpg">
+            <img loading="lazy" src="img/soldadura.jpg">
           </picture>  
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/hacking.webp">
             <source type="image/jpeg" srcset="img/hacking.jpg">
-            <img  data-src="img/hacking.jpg">
+            <img loading="lazy" src="img/hacking.jpg">
           </picture>  
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/junction2019-1.webp">
             <source type="image/jpeg" srcset="img/junction2019-1.jpg">
-            <img  data-src="img/junction2019-1.jpg">
+            <img loading="lazy" src="img/junction2019-1.jpg">
           </picture>  
         </div>
 
         <div class="column-gallery">
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/pepemod.webp">
             <source type="image/jpeg" srcset="img/pepemod.jpg">
-            <img  data-src="img/pepemod.jpg">
+            <img loading="lazy" src="img/pepemod.jpg">
           </picture>
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/atresmedia.webp">
             <source type="image/jpeg" srcset="img/atresmedia.jpg">
-            <img  data-src="img/atresmedia.jpg">
+            <img loading="lazy" src="img/atresmedia.jpg">
           </picture>
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/junction2019.webp">
             <source type="image/jpeg" srcset="img/junction2019.jpg">
-            <img  data-src="img/junction2019.jpg">
+            <img loading="lazy" src="img/junction2019.jpg">
           </picture>
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/printer3d.webp">
             <source type="image/jpeg" srcset="img/printer3d.jpg">
-            <img  data-src="img/printer3d-1.jpg">
+            <img loading="lazy" src="img/printer3d-1.jpg">
           </picture>
         </div>
 
         <div class="column-gallery">
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/flp1.webp">
             <source type="image/jpeg" srcset="img/flp1.jpg">
-            <img  data-src="img/flp1.jpg">
+            <img loading="lazy" src="img/flp1.jpg">
           </picture>
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/soldadura1.webp">
             <source type="image/jpeg" srcset="img/soldadura1.jpg">
-            <img  data-src="img/soldadura1.jpg">
+            <img loading="lazy" src="img/soldadura1.jpg">
           </picture>
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/nn1.webp">
             <source type="image/jpeg" srcset="img/nn1.jpg">
-            <img  data-src="img/nn1.jpg">
+            <img loading="lazy" src="img/nn1.jpg">
           </picture>
-          <picture class="lazy">
+          <picture>
             <source type="image/webp" srcset="img/fosc2.webp">
             <source type="image/jpeg" srcset="img/fosc2.jpg">
-            <img  data-src="img/fosc2-1.jpg">
+            <img loading="lazy" src="img/fosc2-1.jpg">
           </picture>
         </div>
       </div>
@@ -243,10 +243,10 @@
       <div class="tabla">
         <div class="column">
           <a href="https://cloud.fosc.space">
-            <picture class="lazy">
+            <picture>
               <source type="image/webp" srcset="icons/cloud-computing.webp">
               <source type="image/png" srcset="icons/cloud-computing.png">
-              <img data-src="icons/cloud-computing.png" alt="Cloud">
+              <img loading="lazy" src="icons/cloud-computing.png" alt="Cloud">
             </picture>
           </a>
           <h4>Cloud</h4>
@@ -254,10 +254,10 @@
         
         <div class="column">
           <a href="https://doc.fosc.space">
-            <picture class="lazy">
+            <picture>
               <source type="image/webp" srcset="icons/book.webp">
               <source type="image/png" srcset="icons/book.png">
-              <img  data-src="icons/book.png" alt="Wiki">
+              <img loading="lazy" src="icons/book.png" alt="Wiki">
             </picture>
           </a>
           <h4>Wiki</h4>
@@ -265,10 +265,10 @@
         
         <div class="column">
           <a href="https://rss.fosc.space">
-            <picture class="lazy">
+            <picture>
               <source type="image/webp" srcset="icons/rss2.webp">
               <source type="image/png" srcset="icons/rss2.png">
-              <img  data-src="icons/rss2.png" alt="RSS">
+              <img loading="lazy" src="icons/rss2.png" alt="RSS">
             </picture>
           </a>
           <h4>RSS</h4>
@@ -278,10 +278,10 @@
       <div class="tabla tabla2">
         <div class="column">
           <a href="https://netdata.fosc.space">
-            <picture class="lazy">
+            <picture>
               <source type="image/webp" srcset="icons/chart.webp">
               <source type="image/png" srcset="icons/chart.png">
-              <img  data-src="icons/chart.png" alt="NetData">
+              <img loading="lazy" src="icons/chart.png" alt="NetData">
             </picture>
           </a>
           <h4>NetData</h4>
@@ -289,10 +289,10 @@
         
         <div class="column">
           <a href="https://analytics.fosc.space">
-            <picture class="lazy">
+            <picture>
               <source type="image/webp" srcset="icons/analytics.webp">
               <source type="image/png" srcset="icons/analytics.png">
-              <img  data-src="icons/analytics.png" alt="Analytics">
+              <img loading="lazy" src="icons/analytics.png" alt="Analytics">
             </picture>
           </a>
           <h4>Analytics</h4>
@@ -300,10 +300,10 @@
         
         <div class="column">
           <a href="https://git.fosc.space">
-            <picture class="lazy">
+            <picture>
               <source type="image/webp" srcset="icons/gitea.webp">
               <source type="image/png" srcset="icons/gitea.png">
-              <img  data-src="icons/gitea.png" alt="Gitea">
+              <img loading="lazy" src="icons/gitea.png" alt="Gitea">
             </picture>
           </a>
           <h4>Stolen Code</h4>
@@ -347,10 +347,10 @@
   <footer>
     <hr>
     <div class="foot-logo">
-      <picture class="lazy">
+      <picture>
         <source type="image/webp" srcset="img/Logo-invert.webp">
         <source type="image/png" srcset="img/Logo-invert.png">
-        <img  data-src="img/Logo-invert.png">
+        <img loading="lazy" src="img/Logo-invert.png">
       </picture>
       <a href="https://git.fosc.space/fosc/fosc.space">WEBSITE SOURCE CODE</a> 
       <div class="author">
diff --git a/js/main.js b/js/main.js
index e40b5f5..7c996bc 100644
--- a/js/main.js
+++ b/js/main.js
@@ -2,53 +2,3 @@ function loadMap() {
     var site = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1580.5054989176758!2d-0.9796837724532329!3d37.60190018337746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6341863c83cf8f%3A0xe24278be476b56b8!2sFOSC!5e0!3m2!1ses!2ses!4v1544058887076";
     document.getElementById('map').src = site;
 }
-
-document.addEventListener("DOMContentLoaded", function() {
-  var lazyloadImages;    
-
-  if ("IntersectionObserver" in window) {
-    lazyloadImages = document.querySelectorAll(".lazy");
-    var imageObserver = new IntersectionObserver(function(entries, observer) {
-      entries.forEach(function(entry) {
-        if (entry.isIntersecting) {
-          var image = entry.target;
-          image.src = image.dataset.src;
-          image.classList.remove("lazy");
-          imageObserver.unobserve(image);
-        }
-      });
-    });
-
-    lazyloadImages.forEach(function(image) {
-      imageObserver.observe(image);
-    });
-  } else {  
-    var lazyloadThrottleTimeout;
-    lazyloadImages = document.querySelectorAll(".lazy");
-    
-    function lazyload () {
-      if(lazyloadThrottleTimeout) {
-        clearTimeout(lazyloadThrottleTimeout);
-      }    
-
-      lazyloadThrottleTimeout = setTimeout(function() {
-        var scrollTop = window.pageYOffset;
-        lazyloadImages.forEach(function(img) {
-            if(img.offsetTop < (window.innerHeight + scrollTop)) {
-              img.src = img.dataset.src;
-              img.classList.remove('lazy');
-            }
-        });
-        if(lazyloadImages.length == 0) { 
-          document.removeEventListener("scroll", lazyload);
-          window.removeEventListener("resize", lazyload);
-          window.removeEventListener("orientationChange", lazyload);
-        }
-      }, 20);
-    }
-
-    document.addEventListener("scroll", lazyload);
-    window.addEventListener("resize", lazyload);
-    window.addEventListener("orientationChange", lazyload);
-  }
-})