实现懒加载图片的核心思路是：页面初始只加载视口内图片，滚动时动态加载其余图片。使用 Intersection Observer API 监听元素进入视口，将 data-src 赋值给 src 并停止观察，配合占位图与 CSS 过渡提升体验，通过 rootMargin 提前加载附近图片，兼容性好且性能高。
实现懒加载图片的核心思路是：页面初始加载时，只加载视口内或靠近视口的图片，其他图片在用户滚动到其附近时再动态加载。使用 Intersection Observer API 是现代浏览器推荐的做法，它性能好、兼容性强，无需依赖第三方库。
1. 基本HTML结构
图片使用占位符属性，真实图片地址存放在 data-src 中，避免页面加载时自动请求原图。
@@##@@
可以配合低质量占位图（LQIP）或纯色背景提升用户体验：
@@##@@
2. 使用 Intersection Observer 监听图片进入视口
JavaScript 创建观察器，当图片元素接近视口时，将其 data-src 赋值给 src，并停止监听该元素。
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll(".lazy");
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
if (img.dataset.src) {
img.src = img.dataset.src;
img.classList.remove("lazy");
observer.unobserve(img); // 加载后取消监听
}
}
});
});
lazyImages.forEach(img => {
imageObserver.observe(img);
});
});
}
});
});
lazyImages.forEach(img => {
imageObserver.observe(img);
});
});
3. 添加简单CSS优化体验
设置过渡效果，让图片加载更自然：
img.lazy {
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
img:not(.lazy) {
opacity: 1;
}
你也可以用背景模糊渐变等方式进一步美化加载过程。
4. 可选：提前加载靠近视口的图片
通过 rootMargin 扩展观察范围，让用户还没滚到时就开始加载。
const imageObserver = new IntersectionObserver((entries, observer) => {
// ...同上
}, {
rootMargin: "50px" // 提前50px开始加载
});
这个值可以根据实际布局调整，比如卡片流布局可设为 "100px"。
基本上就这些。Intersection Observer 实现懒加载简洁高效，不阻塞主线程，适合现代网页开发。注意老版本IE不支持，如需兼容可引入 polyfill。
