@xingwangzhe/stalux 1.21.8 → 1.21.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.21.8",
+    "version": "1.21.10",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

package/src/components/stalux/posts/postContent.astro

@@ -107,9 +107,6 @@ const mdSourceUrl = exportMd
 {
     props.hasImage && (
         <script>
-            import PhotoSwipeLightbox from "photoswipe/lightbox";
-            import PhotoSwipe from "photoswipe";
-
             // 选择器必须与 @xingwangzhe/satteri-photoswipe HAST 插件生成的 class 一致
             const GALLERY_SELECTOR = "a.pswp-gallery-item";
 
@@ -146,6 +143,21 @@ const mdSourceUrl = exportMd
             let lightbox = null;
 
             async function initLightbox() {
+                const [{ default: PhotoSwipeLightbox }, { default: PhotoSwipe }, { default: photoSwipeCss }] = await Promise.all([
+                    import("photoswipe/lightbox"),
+                    import("photoswipe"),
+                    import("photoswipe/dist/photoswipe.css?raw"),
+                ]);
+
+                // `?raw` keeps Astro from extracting a static stylesheet link.
+                // Inject it only after the first gallery interaction.
+                if (!document.querySelector("style[data-photoswipe]") && photoSwipeCss) {
+                    const style = document.createElement("style");
+                    style.dataset.photoswipe = "true";
+                    style.textContent = photoSwipeCss;
+                    document.head.appendChild(style);
+                }
+
                 // 销毁旧实例（View Transition 导航后，旧 DOM 已移除，需安全销毁）
                 if (lightbox) {
                     try {
@@ -168,15 +180,24 @@ const mdSourceUrl = exportMd
                 lightbox.init();
             }
 
-            // 1) View Transition 导航后触发
-            document.addEventListener("astro:page-load", initLightbox);
+            let initPromise = null;
+            const ensureLightbox = () => {
+                if (!initPromise) initPromise = initLightbox();
+                return initPromise;
+            };
+
+            // 仅在用户第一次点击图片时加载 PhotoSwipe、其 CSS 和图片尺寸数据，
+            // 文章首屏不再为未使用的灯箱支付 JS/CSS 成本。
+            document.addEventListener("click", (event) => {
+                const target = event.target;
+                if (target instanceof Element && target.closest(GALLERY_SELECTOR)) {
+                    void ensureLightbox();
+                }
+            }, { capture: true });
 
-            // 2) 首屏兜底：避免 astro:page-load 在监听器注册前已触发
-            if (document.readyState !== "loading") {
-                setTimeout(initLightbox, 0);
-            } else {
-                document.addEventListener("DOMContentLoaded", () => setTimeout(initLightbox, 0));
-            }
+            document.addEventListener("astro:page-load", () => {
+                initPromise = null;
+            });
         </script>
     )
 }

package/src/layouts/PostLayout.astro

@@ -6,7 +6,6 @@ import PostNavigation from "@components/stalux/posts/postNavigation.astro";
 import PostCC from "@components/stalux/posts/postCC.astro";
 import WalineComment from "@components/stalux/posts/WalineComment.astro";
 import { buildWalineProps } from "@utils/waline";
-import PhotoSwipeStyle from "@components/stalux/posts/PhotoSwipeStyle.astro";
 import { getCollection } from "astro:content";
 import "@styles/base/math.css";
 import layoutStyle from "@styles/components/posts/postLayout.module.css";
@@ -48,8 +47,6 @@ const walineConfig = walineSection && walineSection.serverURL ? {
 } : undefined;
 ---
 
-{props.hasImage && <PhotoSwipeStyle />}
-
 <div class={layoutStyle.postLayout}>
     <div class={layoutStyle.container}>
         <!-- Left Sidebar -->