From b3bd3492eeb7725837378d71a21ef63ee3216468 Mon Sep 17 00:00:00 2001
From: Tommy Parnell <tommy@terribledev.io>
Date: Wed, 30 Mar 2022 14:24:58 -0400
Subject: [PATCH] use lazy load html instead of custom JS

---
 .../MarkExtension/PictureInline.cs            |  2 +-
 .../Views/Shared/Nav.cshtml                   |  6 ++--
 src/TerribleDev.Blog.Web/wwwroot/js/swi.js    | 33 -------------------
 3 files changed, 4 insertions(+), 37 deletions(-)

diff --git a/src/TerribleDev.Blog.Web/MarkExtension/PictureInline.cs b/src/TerribleDev.Blog.Web/MarkExtension/PictureInline.cs
index ad8333b..d381202 100644
--- a/src/TerribleDev.Blog.Web/MarkExtension/PictureInline.cs
+++ b/src/TerribleDev.Blog.Web/MarkExtension/PictureInline.cs
@@ -40,7 +40,7 @@ namespace TerribleDev.Blog.Web.MarkExtension
         {
 
 
-            renderer.Write(string.IsNullOrWhiteSpace(type) ? $"<img src=\"" : $"<source type=\"{type}\" srcset=\"");
+            renderer.Write(string.IsNullOrWhiteSpace(type) ? $"<img loading=\"lazy\" src=\"" : $"<source type=\"{type}\" srcset=\"");
             var escapeUrl = link.GetDynamicUrl != null ? link.GetDynamicUrl() ?? link.Url : link.Url;
 
             renderer.WriteEscapeUrl($"{escapeUrl}{suffix}");
diff --git a/src/TerribleDev.Blog.Web/Views/Shared/Nav.cshtml b/src/TerribleDev.Blog.Web/Views/Shared/Nav.cshtml
index 0b1202e..4825599 100644
--- a/src/TerribleDev.Blog.Web/Views/Shared/Nav.cshtml
+++ b/src/TerribleDev.Blog.Web/Views/Shared/Nav.cshtml
@@ -6,13 +6,13 @@
   <div class="navContent">
       @if(amp == true)
       {
-          <img src="/content/tommyAvatar4.jpg" alt="An image of TerribleDev" class="round navHero" />
+          <img src="/content/tommyAvatar4.jpg" loading="lazy" alt="An image of TerribleDev" class="round navHero" />
       }
       else
       {
         <picture class="navHero">
-          <source srcset="" type="image/webp" alt="An image of TerribleDev" data-src="/content/tommyAvatar4.jpg.webp" class="lazy round" />
-          <img src="" alt="An image of TerribleDev" data-src="/content/tommyAvatar4.jpg" class="lazy round" />
+          <source srcset="/content/tommyAvatar4.jpg.webp" loading="lazy" type="image/webp" alt="An image of TerribleDev" class="round" />
+          <img src="/content/tommyAvatar4.jpg" loading="lazy" alt="An image of TerribleDev" class="round" />
       </picture>
       }
       <span>Tommy "Terrible Dev" Parnell</span>
diff --git a/src/TerribleDev.Blog.Web/wwwroot/js/swi.js b/src/TerribleDev.Blog.Web/wwwroot/js/swi.js
index 8408955..17c57bb 100644
--- a/src/TerribleDev.Blog.Web/wwwroot/js/swi.js
+++ b/src/TerribleDev.Blog.Web/wwwroot/js/swi.js
@@ -35,36 +35,3 @@ function attachNavToggle(elementId) {
 attachNavToggle('menuBtn');
 attachNavToggle('closeNav');
 
-if(window.IntersectionObserver) {
-  var lazyImages = [].slice.call(document.querySelectorAll(".lazy"));
-    var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
-      entries.forEach(function(entry) {
-        if (entry.isIntersecting) {
-          var lazyImage = entry.target;
-          if(lazyImage.dataset.src) {
-            lazyImage.src = lazyImage.dataset.src;
-          }
-          if(lazyImage.dataset.srcset) {
-            lazyImage.srcset = lazyImage.dataset.srcset;
-          }
-
-          lazyImage.classList.remove("lazy");
-          lazyImageObserver.unobserve(lazyImage);
-        }
-      });
-    });
-
-    lazyImages.forEach(function(lazyImage) {
-      lazyImageObserver.observe(lazyImage);
-    });
-} else {
-    var lazyImages = [].slice.call(document.querySelectorAll(".lazy"));
-    lazyImages.forEach(function(image) {
-        if(image.dataset.srcset) {
-          image.srcset = image.dataset.srcset;
-        }
-        if(image.dataset.src) {
-          image.src = image.dataset.src;
-        }
-    });
-}