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;
 			}
 		});