From fe58d25b548158d18630ef2eaa0c02c0ea1b99c8 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Tue, 23 Jun 2026 15:28:47 +0800
Subject: [PATCH] feat(lightbox): add lightbox.js skeleton with lazy-load

---
 public/js/lightbox.js | 74 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 public/js/lightbox.js

diff --git a/public/js/lightbox.js b/public/js/lightbox.js
new file mode 100644
index 0000000..0d854d1
--- /dev/null
+++ b/public/js/lightbox.js
@@ -0,0 +1,74 @@
+(function () {
+  "use strict";
+
+  // 为单个 .blur-img 容器初始化高清图懒加载。
+  // IO 进入视口后把 data-src 写入 src，加载完成加 is-loaded 触发 CSS 淡入。
+  function initLazyLoad(container) {
+    var fullImg = container.querySelector(".blur-img-full");
+    if (!fullImg) return;
+    if (container.getAttribute("data-blur-init")) return;
+    container.setAttribute("data-blur-init", "true");
+
+    var fullSrc = fullImg.getAttribute("data-src");
+    if (!fullSrc) return;
+
+    fullImg.addEventListener("load", function () {
+      this.classList.add("is-loaded");
+    });
+
+    if ("IntersectionObserver" in window) {
+      var io = new IntersectionObserver(
+        function (entries) {
+          entries.forEach(function (entry) {
+            if (entry.isIntersecting) {
+              fullImg.src = fullSrc;
+              io.unobserve(container);
+            }
+          });
+        },
+        { rootMargin: "200px" }
+      );
+      io.observe(container);
+    } else {
+      fullImg.src = fullSrc;
+    }
+  }
+
+  // 收集所有 selectors命中的 .blur-img 节点。
+  // gallery: 正文图（组成图集）；singles: 带 data-single 的单张图（如封面）。
+  function collectImages(roots) {
+    var gallery = [];
+    var singles = [];
+    for (var i = 0; i < roots.length; i++) {
+      var nodes = roots[i].querySelectorAll(".blur-img");
+      for (var j = 0; j < nodes.length; j++) {
+        var n = nodes[j];
+        if (n.getAttribute("data-single")) {
+          singles.push(n);
+        } else {
+          gallery.push(n);
+        }
+      }
+    }
+    return { gallery: gallery, singles: singles };
+  }
+
+  window.__initLightbox = function (selectors) {
+    // selectors 可以是字符串、字符串数组
+    var sels = Array.isArray(selectors) ? selectors : [selectors];
+    var roots = [];
+    for (var i = 0; i < sels.length; i++) {
+      var found = document.querySelectorAll(sels[i]);
+      for (var j = 0; j < found.length; j++) roots.push(found[j]);
+    }
+
+    // 先对所有图片做懒加载（图集与单张都做）
+    var all = collectImages(roots);
+    var everyone = all.gallery.concat(all.singles);
+    for (var k = 0; k < everyone.length; k++) {
+      initLazyLoad(everyone[k]);
+    }
+
+    // click 绑定在 Task 2 完成
+  };
+})();