- index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" />
<head>
<style>
body {
font-family: Arial, sans-serif;
}
#gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}
.thumbnail {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
transition: transform 0.2s;
cursor: pointer;
}
.thumbnail:hover {
transform: scale(1.05);
}
#loader {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="gallery"></div>
<div id="loader">...</div>
<script src="script.js"></script>
</body>
</html>
2. script.js
const gallery = document.getElementById('gallery');
const loader = document.getElementById('loader');
let page = 1;
const limit = 10; // 每次加載的圖片數(shù)量
let imagesList = []; // 存儲(chǔ)加載的圖片路徑
let currentIndex = 0; // 當(dāng)前顯示的圖片索引
// 懶加載圖片
async function loadImages() {
try {
const response = await fetch(`/api/images?page=${page}&limit=${limit}`);
const images = await response.json();
if (images.length === 0) {
loader.textContent = '沒有更多圖片了';
return;
}
// 將新加載的圖片路徑加入列表
images.forEach((image) => imagesList.push(image.path));
images.forEach((image, index) => {
const img = document.createElement('img');
img.src = image.path; // 圖片路徑
img.alt = image.name;
img.className = 'thumbnail';
// 點(diǎn)擊圖片查看大圖
img.addEventListener('click', () => {
const actualIndex = imagesList.indexOf(image.path); // 實(shí)時(shí)獲取索引
openModal(actualIndex);
});
gallery.appendChild(img);
});
page++;
} catch (error) {
console.error('加載圖片失敗', error);
loader.textContent = '加載失敗童番，請(qǐng)重試';
}
}
// 打開模態(tài)框
function openModal(index) {
currentIndex = index;
// 檢查圖片列表和索引有效性
if (!imagesList.length || index < 0 || index >= imagesList.length) {
console.error('圖片索引無效或圖片列表為空');
return;
}
let modal = document.getElementById('modal');
if (!modal) {
modal = document.createElement('div');
modal.id = 'modal';
modal.style.cssText = `
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
`;
modal.addEventListener('click', (e) => {
if (e.target.id === 'modal') {
document.body.removeChild(modal);
}
});
document.addEventListener('keydown', handleKeyDown);
modal.addEventListener('remove', () => {
document.removeEventListener('keydown', handleKeyDown);
});
document.body.appendChild(modal);
}
modal.innerHTML = '';
const modalImg = document.createElement('img');
modalImg.src = imagesList[currentIndex];
modalImg.style.maxWidth = '90%';
modalImg.style.maxHeight = '90%';
modalImg.id = 'modal-img';
const prevButton = createButton('←', () => changeImage(-1));
const nextButton = createButton('→', () => changeImage(1));
modal.appendChild(prevButton);
modal.appendChild(modalImg);
modal.appendChild(nextButton);
}
// 創(chuàng)建按鈕
function createButton(text, onClick) {
const button = document.createElement('button');
button.textContent = text;
button.style.cssText = `
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
font-size: 2rem;
color: white;
cursor: pointer;
user-select: none;
z-index: 10;
`;
button.style.left = text === '←' ? '10%' : 'auto';
button.style.right = text === '→' ? '10%' : 'auto';
button.addEventListener('click', (e) => {
e.stopPropagation(); // 防止冒泡觸發(fā)關(guān)閉
onClick();
});
return button;
}
// 切換圖片
function changeImage(direction) {
if (!imagesList.length) return;
currentIndex = (currentIndex + direction + imagesList.length) % imagesList.length;
const modalImg = document.getElementById('modal-img');
if (modalImg) {
modalImg.src = imagesList[currentIndex];
}
}
// 處理鍵盤事件
function handleKeyDown(event) {
if (event.key === 'ArrowLeft') {
changeImage(-1);
} else if (event.key === 'ArrowRight') {
changeImage(1);
} else if (event.key === 'Escape') {
const modal = document.getElementById('modal');
if (modal) {
document.body.removeChild(modal);
}
}
}
// 使用 Intersection Observer 實(shí)現(xiàn)懶加載
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
loadImages();
}
},
{
root: null,
threshold: 0.1,
}
);
// 監(jiān)聽加載器
observer.observe(loader);
