summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEltrac <hi@guhub.cn>2025-05-17 09:26:26 +0800
committerEltrac <hi@guhub.cn>2025-05-17 09:26:26 +0800
commit9f2fcea1edc5ce78bc0cfe1523c87838bd658be4 (patch)
tree4374e6d4cc4376f2345b48d2efe62d1c2e1c4d60
parentb9ddcc3a0284e1aac0eb57bcfec390a2cff145a1 (diff)
perf: remove lazyloading script and fully rely on the native solution
-rw-r--r--assets/js/lazyload.js47
-rw-r--r--layouts/partials/scripts.html5
2 files changed, 0 insertions, 52 deletions
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>