图片延迟加载通过 Intersection Observer 监听元素进入视口，将 data-src 赋值给 src 实现按需加载，提升性能。
图片延迟加载（Lazy Loading）是一种优化网页性能的技术，它让图片在用户滚动到其位置时才开始加载，而不是页面一打开就加载所有图片。这种技术能显著减少初始页面加载时间、降低带宽消耗，提升用户体验，尤其适用于图片较多的长页面。
实现原理
懒加载的核心思想是：将 img 标签的 src 属性暂时移除或替换为占位图，把真实的图片地址存放在自定义属性中（如 data-src）。当图片元素进入视口（可视区域）时，再将 data-src 的值赋给 src，触发图片加载。
关键步骤：- 用 data-src 存储真实图片路径
- 监听页面滚动或使用 Intersection Observer API
- 检测哪些图片进入可视区域
- 动态设置 src 加载图片
- 加载完成后可解绑事件或标记状态防止重复加载
使用 Intersection Observer 实现（推荐）
现代浏览器推荐使用 Intersection Observer，它比传统的监听 scroll 事件更高效，不会造成频繁重排重绘。
示例代码：
立即学习“Java免费学习笔记（深入）”；
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img); // 加载后停止观察
}
});
});
images.forEach(img => {
imageObserver.observe(img);
});
HTML 结构示例：
@@##@@
兼容性处理与降级方案
如果需要支持较老的浏览器（如 IE），可以结合 scroll 事件监听作为降级方案，或者引入 polyfill。
简单降级方法：
- 通过 getBoundingClientRect() 判断元素是否进入视口
- 绑定 scroll 事件并做节流处理，避免频繁触发
- 加载完成后移除监听或更新状态
优化建议
- 给图片预留尺寸（设置 width 和 height），防止加载时页面跳动
- 配合模糊占位图（blurry placeholder）提升视觉体验
- 加载失败时显示默认图或错误提示
- 考虑使用原生 loading="lazy" 属性作为最简方案
现代浏览器已支持原生懒加载：
@@##@@
这种方式无需 JavaScript，但兼容性需注意（不支持 IE）。
基本上就这些。根据项目需求选择合适的方式，优先推荐 Intersection Observer 或原生 lazy 属性。不复杂但容易忽略细节。
