From 0bf66b0dfa8dd4337936fcdc108e4e0f69781f4e Mon Sep 17 00:00:00 2001
From: ZL Asica <40444637+ZL-Asica@users.noreply.github.com>
Date: Sat, 10 Feb 2024 17:23:38 -0800
Subject: [PATCH] Add lazy loading images (default). Add option in config.

---
 _config.yml             | 9 +++++++++
 _includes/figure.liquid | 5 +++++
 2 files changed, 14 insertions(+)

diff --git a/_config.yml b/_config.yml
index 6c3f3cedd943..d15b64f46b85 100644
--- a/_config.yml
+++ b/_config.yml
@@ -357,6 +357,15 @@ imagemagick:
   output_formats:
     webp: "-quality 85"
 
+# Lazy loading images
+#   If you enable lazy loading, all images will add the loading="lazy" attribute.
+#   This will make your site load faster, but it may not be supported in all browsers.
+#   You can also set loading="" to other values for specific images to override the default behavior.
+#   Options: "auto", "eager", "lazy"
+#   See https://web.dev/browser-level-image-lazy-loading/ for more information.
+lazy_loading_images:
+  enable: true # enables lazy loading of images (recommended)
+
 # -----------------------------------------------------------------------------
 # Optional Features
 # -----------------------------------------------------------------------------
diff --git a/_includes/figure.liquid b/_includes/figure.liquid
index 48ff465d88a2..0cbff9101315 100644
--- a/_includes/figure.liquid
+++ b/_includes/figure.liquid
@@ -63,6 +63,11 @@
       {% if include.zoomable %}
         data-zoomable
       {% endif %}
+      {% if include.loading %}
+        loading="{{ include.loading }}"
+      {% elsif site.lazy_loading_images.enable %}
+        loading="lazy"
+      {% endif %}
       onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
     >
   </picture>