From 60131d6fa9cb0a948aea8c14c59c7f76eff11b0f Mon Sep 17 00:00:00 2001
From: xy <10816187@qq.com>
Date: Wed, 12 Aug 2026 18:15:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E7=89=87lazy=20loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AspectRatio.astro |   0
 src/components/LazyImage.astro   | 131 +++++++++++++++++++++++++++++++
 src/components/PostList.astro    |   9 +--
 src/pages/index.astro            |   2 +-
 src/pages/page/[...page].astro   |   2 +-
 5 files changed, 135 insertions(+), 9 deletions(-)
 create mode 100644 src/components/AspectRatio.astro
 create mode 100644 src/components/LazyImage.astro

diff --git a/src/components/AspectRatio.astro b/src/components/AspectRatio.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/LazyImage.astro b/src/components/LazyImage.astro
new file mode 100644
index 0000000..8ec026b
--- /dev/null
+++ b/src/components/LazyImage.astro
@@ -0,0 +1,131 @@
+---
+interface Props {
+  src: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  class?: string;
+}
+
+const {
+  src,
+  alt = "",
+  width,
+  height,
+  class: className = ""
+} = Astro.props;
+---
+
+<div
+  class={`lazy-image ${className}`}
+  data-src={src}
+  style={`aspect-ratio:${width}/${height}`}
+>
+  <div class="placeholder"></div>
+
+  <img
+    class="real-image"
+    alt={alt}
+    width={width}
+    height={height}
+    loading="lazy"
+    decoding="async"
+  />
+</div>
+
+
+<style>
+.lazy-image {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.lazy-image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.placeholder {
+  position: absolute;
+  inset: 0;
+  background: #f3f4f6;
+  background-image: linear-gradient(
+    90deg,
+    #f3f4f6 0%,
+    #e5e7eb 50%,
+    #f3f4f6 100%
+  );
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}
+
+.real-image {
+  opacity: 0;
+  transition: opacity .35s ease;
+}
+
+.real-image.loaded {
+  opacity: 1;
+}
+</style>
+
+
+<script>
+function initLazyImages() {
+  const images = document.querySelectorAll(".lazy-image");
+
+  const observer = new IntersectionObserver(
+    entries => {
+      entries.forEach(entry => {
+
+        if (!entry.isIntersecting) return;
+
+        const container = entry.target as HTMLElement;
+        const img = container.querySelector(
+          ".real-image"
+        ) as HTMLImageElement;
+
+        const src = container.dataset.src;
+
+        if (!src) return;
+
+        img.src = src;
+
+        img.onload = () => {
+          img.classList.add("loaded");
+
+          const placeholder =
+            container.querySelector(".placeholder");
+
+          placeholder?.remove();
+        };
+
+        observer.unobserve(container);
+      });
+    },
+    {
+      rootMargin: "300px"
+    }
+  );
+
+
+  images.forEach(img => observer.observe(img));
+}
+
+
+initLazyImages();
+</script>
diff --git a/src/components/PostList.astro b/src/components/PostList.astro
index f171f87..1d2375e 100644
--- a/src/components/PostList.astro
+++ b/src/components/PostList.astro
@@ -4,6 +4,7 @@ import Folder from "@/assets/icon/folder.png?url";
 import Calendar from "@/assets/icon/calendar.png?url";
 import type {Post} from "@/types/post";
 import {formatDatetime} from "@/lib/format.ts";
+import LazyImage from "@/components/LazyImage.astro";
 
 interface Props {
   posts: Post[]
@@ -23,7 +24,7 @@ posts.map((post) => {
       <a href={`/post/${post.slug}`}>
         <article class="post-card">
           <div class="post-cover">
-            <img src={post.cover} alt={post.title} loading="lazy"/>
+            <LazyImage src={post.cover} alt={post.title} />
           </div>
           <div class="post-body">
             <div class="post-meta">
@@ -112,12 +113,6 @@ posts.map((post) => {
     overflow: hidden;
   }
 
-  .post-cover img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
   .post-body {
     flex: 1;
     min-width: 0;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index bfbaed7..e2c08f3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,7 +16,7 @@ const { list, total } = await http.get<ApiPageResponse<Post>>("posts", {
 const totalPage = Math.ceil(total / metadata.postPageSize);
 ---
 
-<Layout>
+<Layout description="天若有情天亦老，人间正道是沧桑。" title="博客首页">
   <IndexView
     posts={list}
     page={1}
diff --git a/src/pages/page/[...page].astro b/src/pages/page/[...page].astro
index a212cd4..a1b2f9b 100644
--- a/src/pages/page/[...page].astro
+++ b/src/pages/page/[...page].astro
@@ -27,7 +27,7 @@ if (totalPage < Number(page)) {
 }
 ---
 
-<Layout>
+<Layout description="天若有情天亦老，人间正道是沧桑。" title="博客首页">
   <IndexView
     posts={list}
     page={Number(page)}