图片懒加载的核心是按需加载，即初始化时仅加载可视区图片，滚动至附近再加载其余图片，以减少首屏请求、提升渲染速度并节省带宽；关键依赖JavaScript检测元素是否进入视口，推荐使用Intersection Observer API，兼容方案为getBoundingClientRect或节流的scroll监听；实现上用data-src存真实地址、src设占位图，进入视口后替换并停止观察。
图片懒加载的核心是“按需加载”——页面初始化时只加载可视区域内的图片，其余图片等到用户滚动到附近再加载。这样能减少首屏请求、加快渲染速度、节省带宽。
懒加载的关键判断依据：元素是否进入视口
浏览器本身不自动识别“图片是否可见”，需要 JavaScript 主动检测。常用方法有：
- getBoundingClientRect()：获取图片元素相对于视口的坐标（top/bottom/left/right），判断其 top 是否小于视口高度、bottom 是否大于 0；
- Intersection Observer API（推荐）：原生异步监听元素与视口的交叉状态，性能好、写法简洁，无需频繁监听 scroll 事件；
- 手动监听 scroll + throttle：兼容老浏览器，但容易造成卡顿，需节流控制检测频率。
实现步骤：从占位到真实图片替换
懒加载不是“不加载”，而是延迟加载。通常做法是：
- HTML 中用 data-src 存真实图片地址，src 放占位图（如 1×1 透明 GIF 或 base64）；
- JS 检测到图片即将进入视口时，把 data-src 的值赋给 src；
- 可选：加载完成后添加 loaded 类或触发事件，便于加动画或埋点。
一个最小可用的 Intersection Observer 示例
不用第三方库，几行代码就能跑起来：
立即学习“Java免费学习笔记（深入）”；
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img); // 加载完就停止观察
}
});
});
lazyImages.forEach(img => observer.observe(img));
注意几个实际细节
- 移动端要注意 resize 和 orientationchange 可能影响视口，但通常 Intersection Observer 自动响应；
- 图片加载失败时建议 fallback，比如显示错误占位符或重试逻辑；
- SEO 友好提示：服务端渲染或使用 loading="lazy"（原生支持，但兼容性有限，可作为降级补充）。
基本上就这些。原理不复杂，但容易忽略节流、错误处理和兼容策略。
