fix: add blur effect when the img is loading

src/components/ArticleContainer.astro

@@ -58,6 +58,24 @@ const { className = "", dataPagefindBody = true } = Astro.props;
 		text-decoration: none;
 		cursor: pointer;
 	}
+
+	/* 修改图片相关样式 */
+	:global(article img) {
+		opacity: 0;
+		position: relative;
+		background-color: #f0f0f0;
+		transition: all 0.5s ease-in-out;
+	}
+
+	:global(article img.loading) {
+		opacity: 1;
+		filter: blur(10px);
+	}
+
+	:global(article img.loaded) {
+		opacity: 1;
+		filter: blur(0);
+	}
 </style>
 
 <script>
@@ -66,12 +84,23 @@ const { className = "", dataPagefindBody = true } = Astro.props;
 	const imgs = document.querySelectorAll("article img") as NodeListOf<HTMLImageElement>;
 
 	imgs.forEach(function (img) {
+		// 检查图片是否已经加载完成
+		if (img.complete) {
+			img.classList.add("loaded");
+		} else {
+			img.classList.add("loading");
+			img.onload = () => {
+				img.classList.remove("loading");
+				img.classList.add("loaded");
+			};
+		}
+
 		img.style.cursor = "pointer";
+
 		img.addEventListener("click", () => {
 			if (modal && modalImg) {
 				modal.style.display = "flex";
 				document.body.style.overflow = "hidden";
-
 				modalImg.src = img.src;
 			}
 		});

src/components/note/Note.astro

@@ -3,7 +3,8 @@ import { type CollectionEntry, render } from "astro:content";
 import FormattedDate from "@/components/FormattedDate.astro";
 import type { HTMLTag, Polymorphic } from "astro/types";
 import GiscusComment from "@/components/componentsBefore/GiscusComment";
-import ArticleContainer from "./ArticleContainer.astro";
+import ArticleContainer from "../ArticleContainer.astro";
+
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
 	note: CollectionEntry<"note">;
 	isPreview?: boolean | undefined;

src/layouts/BlogPost.astro

@@ -6,7 +6,7 @@ import TOC from "@/components/blog/TOC.astro";
 import WebMentions from "@/components/blog/webmentions/index.astro";
 import GiscusComment from "@/components/componentsBefore/GiscusComment";
 import BaseLayout from "./Base.astro";
-import ArticleContainer from "@/components/note/ArticleContainer.astro";
+import ArticleContainer from "@/components/ArticleContainer.astro";
 
 interface Props {
 	post: CollectionEntry<"post">;