diff --git a/assets/js/app.js b/assets/js/app.js index 7389d27..7d38bf6 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1,11 +1,14 @@ // 全局变量 -let allAlbums = []; +let allAlbums = []; // 存储所有相册数据 +let displayedAlbums = []; // 当前显示的相册数据 let searchTimeout = null; -let currentPage = 1; -let albumsPerPage = 50; // 减少每页数量,提高加载速度 +let currentDisplayPage = 1; // 前端显示的分页 +let albumsPerPage = 50; // 每次显示50个相册 let isLoadingMore = false; let hasMoreAlbums = true; let lazyLoadObserver = null; +let isAllAlbumsLoaded = false; // 标记是否已加载所有相册数据 +let isInFavoritesPage = false; // 标记当前是否在收藏页 // API基础URL const API_BASE = '/api'; @@ -67,6 +70,9 @@ function initInfiniteScroll() { // 处理滚动事件 function handleScroll() { + // 如果在收藏页,禁用无限滚动 + if (isInFavoritesPage) return; + if (isLoadingMore || !hasMoreAlbums) return; // 检查是否滚动到底部 @@ -80,18 +86,36 @@ function handleScroll() { } } -// 加载更多相册 +// 加载更多相册(从前端已加载的数据中获取) async function loadMoreAlbums() { - if (isLoadingMore || !hasMoreAlbums) return; + // 如果在收藏页,不加载更多数据 + if (isInFavoritesPage) return; + + if (isLoadingMore || !hasMoreAlbums || !isAllAlbumsLoaded) return; isLoadingMore = true; try { - await loadAlbums(); + // 显示加载更多指示器 + showLoadingMore(); + + // 增加当前显示页数 + currentDisplayPage++; + + // 显示下一页数据 + displayCurrentPage(); + + // 初始化图片懒加载 + initLazyLoading(); + + // 预加载下一批图片 + preloadNextBatchImages(); + } catch (error) { console.error('加载更多相册失败:', error); showLoadMoreError(); } finally { isLoadingMore = false; + hideLoadingMore(); } } @@ -218,47 +242,40 @@ function appendAlbums(albums) { container.insertAdjacentHTML('beforeend', newAlbumsHTML); } -// 加载所有相册 +// 加载所有相册数据(一次性加载全部) async function loadAlbums(reset = false) { try { if (reset) { - currentPage = 1; + currentDisplayPage = 1; allAlbums = []; + displayedAlbums = []; hasMoreAlbums = true; + isAllAlbumsLoaded = false; const container = document.getElementById('albums-container'); container.innerHTML = ''; } - if (!hasMoreAlbums) return; - - // 显示骨架屏 - if (currentPage === 1) { - showSkeleton(); - } else { - showLoadingMore(); + // 如果已经加载过所有数据,直接显示当前页 + if (isAllAlbumsLoaded) { + displayCurrentPage(); + return; } + // 显示骨架屏 + showSkeleton(); + + // 一次性加载所有相册数据 const response = await fetch(`${API_BASE}/albums`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } - const newAlbums = await response.json(); - - // 检查是否还有更多数据 - if (newAlbums.length < albumsPerPage) { - hasMoreAlbums = false; - } - - // 合并到现有相册列表 - allAlbums = [...allAlbums, ...newAlbums]; - - if (currentPage === 1) { - displayAlbums(allAlbums); - } else { - appendAlbums(newAlbums); - } - + allAlbums = await response.json(); + isAllAlbumsLoaded = true; + + // 显示第一页数据 + displayCurrentPage(); + updateStats(allAlbums); // 初始化图片懒加载 @@ -267,17 +284,31 @@ async function loadAlbums(reset = false) { // 预加载下一批图片 preloadNextBatchImages(); - currentPage++; - - // 隐藏加载更多指示器 - hideLoadingMore(); } catch (error) { console.error('加载相册失败:', error); showError('加载相册数据失败,请刷新页面重试'); - hideLoadingMore(); } } +// 显示当前页的相册数据 +function displayCurrentPage() { + const startIndex = (currentDisplayPage - 1) * albumsPerPage; + const endIndex = startIndex + albumsPerPage; + + // 获取当前页要显示的相册 + displayedAlbums = allAlbums.slice(startIndex, endIndex); + + // 如果是第一页,直接显示;否则追加显示 + if (currentDisplayPage === 1) { + displayAlbums(displayedAlbums); + } else { + appendAlbums(displayedAlbums); + } + + // 检查是否还有更多数据可以显示 + hasMoreAlbums = (currentDisplayPage * albumsPerPage) < allAlbums.length; +} + // 搜索相册 // 防抖搜索函数 async function debouncedSearch() { @@ -654,6 +685,9 @@ function openRandomAlbum() { // 显示收藏夹 function showFavorites() { + // 设置当前在收藏页 + isInFavoritesPage = true; + // 从后端API获取收藏列表 fetch(`${API_BASE}/favorites`) .then(response => { @@ -744,7 +778,7 @@ function displayFavorites(favoriteImages) {
-
@@ -763,6 +797,14 @@ function formatDate(dateString) { }); } +// 返回首页 +function backToHome() { + // 重置收藏页标记 + isInFavoritesPage = false; + // 重新加载首页相册 + loadAlbums(true); +} + // 全局变量存储收藏列表和当前预览索引 let currentFavorites = []; let currentPreviewIndex = -1;