From 432c6326ee492da92a225ffdab5a703ec818221d Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Mon, 22 Feb 2021 21:37:48 +0000
Subject: [PATCH] feat: complete migration to native lazy loading

One less JS dependency.
---
 wowchemy/data/assets.toml                            | 5 -----
 wowchemy/layouts/partials/li_card.html               | 2 +-
 wowchemy/layouts/partials/li_compact.html            | 2 +-
 wowchemy/layouts/partials/portfolio_li_card.html     | 2 +-
 wowchemy/layouts/partials/portfolio_li_showcase.html | 2 +-
 wowchemy/layouts/shortcodes/gallery.html             | 2 +-
 6 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/wowchemy/data/assets.toml b/wowchemy/data/assets.toml
index ed68b44d..c7bba181 100644
--- a/wowchemy/data/assets.toml
+++ b/wowchemy/data/assets.toml
@@ -60,11 +60,6 @@
   version = "8.8.4"
   sri = "sha512-as1BF4+iHZ3BVO6LLDQ7zrbvTXM+c/1iZ1qII/c3c4L8Rn5tHLpFUtpaEtBNS92f+xGsCzsD7b62XP3XYap6oA=="
   url = "https://cdnjs.cloudflare.com/ajax/libs/mermaid/%s/mermaid.min.js"
-[js.lazysizes]
-  version = "5.2.2"
-  sri = "sha512-TmDwFLhg3UA4ZG0Eb4MIyT1O1Mb+Oww5kFG0uHqXsdbyZz9DcvYQhKpGgNkamAI6h2lGGZq2X8ftOJvF/XjTUg=="
-  url = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/%s/lazysizes.min.js"
-  async = true
 [js.cookieconsent]
   version = "3.1.1"
   sri = "sha256-5VhCqFam2Cn+yjw61zbBNrbHVJ6SRydPeKopYlngbiQ="
diff --git a/wowchemy/layouts/partials/li_card.html b/wowchemy/layouts/partials/li_card.html
index 2529ab08..8f02edc1 100644
--- a/wowchemy/layouts/partials/li_card.html
+++ b/wowchemy/layouts/partials/li_card.html
@@ -41,7 +41,7 @@
   {{ $image := .Fill (printf "808x455 %s" $anchor) }}
   {{ $image_lq := (.Fill (printf "808x455 %s q1" $anchor)).Filter $filters }}
   <a href="{{ $item.RelPermalink }}">
-    <div class="img-hover-zoom"><img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" class="article-banner lazyload" alt="{{ $item.Title }}"></div>
+    <div class="img-hover-zoom"><img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" class="article-banner" alt="{{ $item.Title }}" loading="lazy"></div>
   </a>
   {{end}}
 
diff --git a/wowchemy/layouts/partials/li_compact.html b/wowchemy/layouts/partials/li_compact.html
index f4d41d52..c115f7f8 100644
--- a/wowchemy/layouts/partials/li_compact.html
+++ b/wowchemy/layouts/partials/li_compact.html
@@ -80,7 +80,7 @@
     {{ $image := .Resize "150x" }}
     {{ $image_lq := (.Resize "150x q1").Filter $filters }}
     <a href="{{$link}}" {{ $target | safeHTMLAttr }}>
-      <img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="lazyload">
+      <img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" loading="lazy">
     </a>
     {{end}}
   </div>
diff --git a/wowchemy/layouts/partials/portfolio_li_card.html b/wowchemy/layouts/partials/portfolio_li_card.html
index 51d84212..ee1de482 100644
--- a/wowchemy/layouts/partials/portfolio_li_card.html
+++ b/wowchemy/layouts/partials/portfolio_li_card.html
@@ -24,7 +24,7 @@
     {{ $image := .Resize "550x" }}
     {{ $image_lq := (.Resize "550x q1").Filter $filters }}
     <a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="card-image hover-overlay">
-      <img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="img-responsive lazyload">
+      <img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="img-responsive" loading="lazy">
     </a>
     {{ end }}
     <div class="card-text">
diff --git a/wowchemy/layouts/partials/portfolio_li_showcase.html b/wowchemy/layouts/partials/portfolio_li_showcase.html
index e7e5e976..6a65df26 100644
--- a/wowchemy/layouts/partials/portfolio_li_showcase.html
+++ b/wowchemy/layouts/partials/portfolio_li_showcase.html
@@ -55,7 +55,7 @@
       {{ $image := .Resize "540x" }}
       {{ $image_lq := (.Resize "540x q1").Filter $filters }}
       {{if $do_link}}<a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{end}}
-        <img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="lazyload">
+        <img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" loading="lazy">
       {{if $do_link}}</a>{{end}}
       {{end}}
     </div>
diff --git a/wowchemy/layouts/shortcodes/gallery.html b/wowchemy/layouts/shortcodes/gallery.html
index d9874879..1ff9ac92 100644
--- a/wowchemy/layouts/shortcodes/gallery.html
+++ b/wowchemy/layouts/shortcodes/gallery.html
@@ -29,7 +29,7 @@
       {{ end }}
     {{ end }}
     <a data-fancybox="gallery-{{$album}}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }}>
-      <img data-src="{{ $image.RelPermalink }}" class="lazyload" alt="{{ plainify $caption | default $filename }}" width="{{ $image.Width }}" height="{{ $image.Height }}">{{/* Width & height (or low res src) required for lazy loading. */}}
+      <img data-src="{{ $image.RelPermalink }}" loading="lazy" alt="{{ plainify $caption | default $filename }}" width="{{ $image.Width }}" height="{{ $image.Height }}">{{/* Width & height (or low res src) required for lazy loading. */}}
     </a>
   {{end}}