update code level

assets/js/album.js

@@ -443,36 +443,36 @@ function updateLightboxContent(newIndex) {
 
 // 初始化图片懒加载
 function initLazyLoading() {
+    // 使用Intersection Observer实现懒加载
     if ('IntersectionObserver' in window) {
-        const imageObserver = new IntersectionObserver((entries, observer) => {
+        const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
                     const img = entry.target;
-                    if (img.dataset.src) {
-                        img.src = img.dataset.src;
-                        img.classList.remove('lazy');
-                        delete img.dataset.src;
+                    const imageId = img.getAttribute('data-image-id');
+                    
+                    if (imageId && !img.classList.contains('loaded')) {
+                        imageLoader.loadImage(imageId, img);
                     }
-                    imageObserver.unobserve(img);
+                    
+                    observer.unobserve(img);
                 }
             });
         }, {
-            rootMargin: '50px 0px',
+            rootMargin: '200px 0px', // 提前200px开始加载
             threshold: 0.1
         });
 
-        document.querySelectorAll('img.lazy').forEach(img => {
-            imageObserver.observe(img);
-        });
-    } else {
-        // 不支持IntersectionObserver的浏览器回退方案
-        document.querySelectorAll('img.lazy').forEach(img => {
-            if (img.dataset.src) {
-                img.src = img.dataset.src;
-                img.classList.remove('lazy');
-                delete img.dataset.src;
+        // 观察所有带有data-image-id的图片
+        document.querySelectorAll('img[data-image-id]').forEach(img => {
+            if (!img.classList.contains('loaded')) {
+                observer.observe(img);
             }
         });
+    } else {
+        // 不支持Intersection Observer的回退方案
+        console.warn('浏览器不支持Intersection Observer，使用回退懒加载方案');
+        initAlbumFallbackLazyLoading();
     }
 }
 

assets/js/app.js

@@ -143,6 +143,7 @@ document.addEventListener('DOMContentLoaded', function () {
     loadAlbums();
     initSearch();
     initInfiniteScroll();
+    initLazyLoading(); // 初始化图片懒加载
 });
 
 // 初始化搜索功能
@@ -422,6 +423,9 @@ function appendAlbums(albums) {
     // 移除加载指示器并添加新相册
     hideLoadingMore();
     container.insertAdjacentHTML('beforeend', newAlbumsHTML);
+    
+    // 重新初始化懒加载，观察新添加的图片
+    initLazyLoading();
 }
 
 // 加载所有相册数据（一次性加载全部）
@@ -617,51 +621,27 @@ function displayAlbums(albums) {
     }).join('');
 }
 
-// 初始化图片懒加载
-function initLazyLoading() {
-    if (!lazyLoadObserver) {
-        lazyLoadObserver = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    const img = entry.target;
-                    if (img.dataset.src) {
-                        img.src = img.dataset.src;
-                        img.classList.remove('lazy');
-                        lazyLoadObserver.unobserve(img);
-                    }
-                }
-            });
-        }, {
-            rootMargin: '50px', // 优化：提前50px开始加载
-            threshold: 0.1      // 优化：降低触发阈值
-        });
-    }
 
-    const lazyImages = document.querySelectorAll('img.lazy');
-    lazyImages.forEach(img => {
-        lazyLoadObserver.observe(img);
-    });
-}
 
 // 预加载下一批图片
 function preloadNextBatchImages() {
     const imagesToPreload = [];
-    const visibleImages = document.querySelectorAll('img.lazy');
+    const visibleImages = document.querySelectorAll('img[data-image-id]:not(.loaded)');
 
-    // 预加载前10张可见图片
+    // 预加载前5张可见图片
     visibleImages.forEach((img, index) => {
-        if (index < 10 && img.dataset.src) {
-            imagesToPreload.push(img.dataset.src);
+        if (index < 5) {
+            const imageId = img.getAttribute('data-image-id');
+            if (imageId) {
+                imagesToPreload.push(imageId);
+            }
         }
     });
 
-    // 使用link预加载
-    imagesToPreload.forEach(src => {
-        const link = document.createElement('link');
-        link.rel = 'preload';
-        link.as = 'image';
-        link.href = src;
-        document.head.appendChild(link);
+    // 使用图片加载器预加载
+    imagesToPreload.forEach(imageId => {
+        const tempImg = new Image();
+        imageLoader.loadImage(imageId, tempImg);
     });
 }