From 9f2fcea1edc5ce78bc0cfe1523c87838bd658be4 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Sat, 17 May 2025 09:26:26 +0800
Subject: perf: remove lazyloading script and fully rely on the native solution

---
 assets/js/lazyload.js         | 47 -------------------------------------------
 layouts/partials/scripts.html |  5 -----
 2 files changed, 52 deletions(-)
 delete mode 100644 assets/js/lazyload.js

diff --git a/assets/js/lazyload.js b/assets/js/lazyload.js
deleted file mode 100644
index be271cdc..00000000
--- a/assets/js/lazyload.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * lazyload.js
- * - implement native `loading="lazy"` method
- * - replace placeholders
- */
-
-document.addEventListener("DOMContentLoaded", () => {
-  const allImages = document.querySelectorAll("img");
-  const images = document.querySelectorAll("img[data-src]");
-
-  // if there is a low-res temporary image placeholder
-  // replace it with real image afterwords
-  const loadImage = (image) => {
-    const loadingImage = image.src; // Store current loading image (if any)
-    const realImage = image.dataset.src; // Get the real image URL from data-src
-    image.src = loadingImage; // Optionally, reset the src to the placeholder
-    image.onload = () => {
-      image.classList.add("fade-in"); // Optional: Apply fade-in effect after loading
-    };
-    image.src = realImage; // Now, load the actual image
-    image.removeAttribute("data-src"); // Clean up after lazy loading
-  };
-
-  // observe view port change
-  // load image when scrolled into view
-  const observer = new IntersectionObserver(
-    (entries, observer) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          loadImage(entry.target);
-          observer.unobserve(entry.target); // Stop observing once the image has loaded
-        }
-      });
-    },
-    { threshold: 0.1 },
-  );
-
-  // initialize native lazyloading
-  allImages.forEach((img) => {
-    img.setAttribute("loading", "lazy");
-  });
-
-  // lazy load
-  images.forEach((image) => {
-    observer.observe(image); // Start observing each image
-  });
-});
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index e7f1c454..308038ff 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -3,11 +3,6 @@
   <script src="{{ $.Site.Params.staticPrefix }}{{ . | relURL }}"></script>
 {{- end }}
 
-{{- $lazyload := resources.Get "js/lazyload.js" | minify }}
-{{- if $lazyload }}
-  <script>{{ $lazyload.Content | safeJS }}</script>
-{{- end }}
-
 {{- if or (in .Section "posts") (in .Section "cards") (in .Section "library") (eq .Type "single") }}
   <script src="/js/fancybox.umd.js"></script>
   <script>Fancybox.bind("[data-fancybox]");</script>
-- 
cgit v1.2.3