使用Intersection Observer API实现图片懒加载，通过监听元素进入视口触发图片加载，相比传统scroll事件更高效。首先为img标签设置data-src存储真实地址，src指向占位图；然后创建Observer实例，当目标元素可见时将其src替换为data-src，并移除lazy类且停止观察；最后可通过CSS添加淡入过渡效果提升体验。该方法避免频繁重排，性能更优，推荐结合loading="lazy"做兼容处理。
页面加载大量图片时，性能容易下降。懒加载是一种优化手段，让图片在进入视口时才开始加载，从而减少初始资源请求。使用 Intersection Observer API 实现懒加载，比传统监听 scroll 事件更高效、更流畅。
1. 原理：Intersection Observer 是什么？
Intersection Observer 是浏览器提供的 API，用于异步监听目标元素与视口的交叉状态。当目标元素即将或已经进入可视区域时，回调函数会被触发，适合用来实现懒加载。
相比手动计算 offsetTop 和 scrollTop，它性能更好，不会频繁触发重排或重绘。
2. HTML 结构：标记待加载图片
给 img 标签设置一个临时属性（如 data-src）存放真实图片地址，src 先指向占位图或为空。
立即学习“Java免费学习笔记（深入）”；
@@##@@ @@##@@
3. JavaScript 实现懒加载逻辑
创建 Intersection Observer 实例，监听所有带有 .lazy 类的图片。
DirCMS内容管理系统6.0
下载
DirCMS内容管理系统，是国内自主研发的一款功能强大而又不失小巧简洁的由PHP+Mysql架构的内容管理系统。DirCMS代码全部开源，便于使用者二次开发或定制；并采用简洁的模板标签技术，使制作模板更加容易，一般情况下，用DirCMS架构一个企业站只需半天时间即可，真正实现功能的简洁，实用，强大，灵活。可广泛应用于架构各类门户站，下载站，企业站，工作室等站点。
const lazyImages = document.querySelectorAll('img.lazy');
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const src = img.dataset.src;
if (src) {
img.src = src;
img.classList.remove('lazy');
}
// 加载完成后停止观察
observer.unobserve(img);
}
});
});
// 开始观察每一张懒加载图片
lazyImages.forEach(img => {
imageObserver.observe(img);
});
4. 提高体验：添加加载过渡效果
可以在图片加载过程中添加淡入效果，提升视觉体验。
先在 CSS 中定义类：
img {
opacity: 1;
transition: opacity 0.3s;
}
img.lazy {
opacity: 0;
}
图片加载完成后，自然从透明变为可见，实现平滑显示。
基本上就这些。用 Intersection Observer 实现懒加载不复杂但容易忽略细节，比如及时取消观察避免重复操作。这种方式兼容现代主流浏览器，配合 loading="lazy"（原生懒加载）可做降级处理，是目前推荐的做法。
