更改相册背景效果

public/css/index.css

@@ -235,7 +235,7 @@ body::after {
 
 .photo-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 2rem;
 }
 

resources/views/detail.blade.php

@@ -81,6 +81,7 @@
     let currentPhotos = [];
     let currentRotation = 0;
 
+    // 显示相册详情
     // 显示相册详情
     function showAlbumDetail(album) {
         currentAlbum = album;
@@ -108,7 +109,6 @@
             // 添加点击事件
             photoItem.addEventListener('click', () => {
                 currentPhotoIndex = index;
-                // showPhotoPreview(photo.original);
                 showPhotoPreview(photo.compressed);
             });
 
@@ -117,7 +117,13 @@
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
                         const lazyImage = entry.target;
-                        lazyImage.src = lazyImage.dataset.src;
+                        const src = lazyImage.dataset.src;
+
+                        // 移除data-src属性确保只加载一次
+                        lazyImage.removeAttribute('data-src');
+
+                        // 设置src属性开始加载
+                        lazyImage.src = src;
 
                         // 图片加载完成后显示
                         lazyImage.onload = () => {
@@ -127,6 +133,7 @@
                             }
                         };
 
+                        // 停止观察
                         observer.unobserve(lazyImage);
                     }
                 });