<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hiệu Ứng Load Sản Phẩm Khi Cuộn / Rê Chuột</title>
<style>
body {
font-family: "Segoe UI", Arial, sans-serif;
background: #f5f5f5;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.product-item {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.4s, box-shadow 0.3s;
cursor: pointer;
}
.product-item:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.product-item img {
width: 100%;
height: 220px;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s ease;
}
.product-item img.loaded {
opacity: 1;
}
.product-info {
padding: 10px 15px;
text-align: center;
}
.product-info h3 {
font-size: 16px;
color: #333;
margin: 8px 0;
}
.price {
color: #e74c3c;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Hiệu Ứng Load Sản Phẩm Khi Cuộn / Rê Chuột</h1>
<div class="product-grid">
<!-- Demo 20 sản phẩm -->
<div class="product-item">
<img data-src="https://picsum.photos/400?random=1" alt="Sản phẩm 1" class="lazy">
<div class="product-info">
<h3>Sản phẩm 1</h3>
<div class="price">350.000đ</div>
</div>
</div>
<div class="product-item">
<img data-src="https://picsum.photos/400?random=2" alt="Sản phẩm 2" class="lazy">
<div class="product-info">
<h3>Sản phẩm 2</h3>
<div class="price">420.000đ</div>
</div>
</div>
<div class="product-item">
<img data-src="https://picsum.photos/400?random=3" alt="Sản phẩm 3" class="lazy">
<div class="product-info">
<h3>Sản phẩm 3</h3>
<div class="price">290.000đ</div>
</div>
</div>
<!-- Tạo nhanh thêm nhiều sản phẩm -->
<script>
for(let i=4; i<=500; i++){
document.write(`
<div class="product-item">
<img data-src="https://picsum.photos/400?random=${i}" alt="Sản phẩm ${i}" class="lazy">
<div class="product-info">
<h3>Sản phẩm ${i}</h3>
<div class="price">${(200+i*10)}.000đ</div>
</div>
</div>`);
}
</script>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll("img.lazy");
// Lazy load khi cuộn gần hình
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.onload = () => img.classList.add("loaded");
observer.unobserve(img);
}
});
}, { rootMargin: "200px" });
lazyImages.forEach(img => observer.observe(img));
// Nếu rê chuột vào – load ngay
document.querySelectorAll('.product-item').forEach(item => {
item.addEventListener('mouseenter', () => {
const img = item.querySelector('img.lazy');
if (img && !img.src.includes(img.dataset.src)) {
img.src = img.dataset.src;
img.onload = () => img.classList.add("loaded");
}
});
});
});
</script>
</body>
</html>
Không có nhận xét nào:
Đăng nhận xét