From 2a056fe68ecf4f07a3a47a0735bb0cdb76a187b7 Mon Sep 17 00:00:00 2001
From: ZL Asica <40444637+ZL-Asica@users.noreply.github.com>
Date: Tue, 13 Feb 2024 21:41:14 -0800
Subject: [PATCH] Implement Default Lazy Loading for Images with Configurable
 Option (#2183)

This PR introduces an enhancement to the site's image-loading strategy
by implementing lazy loading as the default behavior for all images. The
motivation behind this change is to improve the site's load times.

**Changes:**
1. **Default Lazy Loading:** By `default`, all images will now have the
`loading="lazy"` attribute.

2. **Configurable Option in `_config.yml`:** Added a new configuration
option under `lazy_loading_images.enable`.

3. **Override Capability:** For `specific images` where the user doesn't
want lazy loading, they can `override` this by directly setting the
`loading attribute` in the `image tag`.
---
 _config.yml             | 9 +++++++++
 _includes/figure.liquid | 5 +++++
 2 files changed, 14 insertions(+)

diff --git a/_config.yml b/_config.yml
index f91271f93931..449cba02b6a7 100644
--- a/_config.yml
+++ b/_config.yml
@@ -358,6 +358,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>