图片懒加载核心是按需加载，即仅在图片即将进入视口时才发起请求，需配合Intersection Observer替代scroll监听防卡顿、显式设置width/height或aspect-ratio防布局抖动、loading="lazy"兜底、fetchpriority="high"提升关键图优先级，并做好onerror降级与decoding="async"解码优化。
图片懒加载的核心是“按需加载”，即只在图片即将进入视口时才开始加载，避免页面初始渲染时大量请求阻塞主线程和带宽。关键不在于“是否用 Intersection Observer”，而在于如何减少布局抖动、避免重排重绘、控制资源调度节奏。
用 Intersection Observer 替代 scroll 事件监听
传统基于 window.onscroll 的实现会高频触发、频繁计算元素位置，极易引发强制同步布局（forced reflow），拖慢滚动帧率。Intersection Observer 是浏览器原生异步回调机制，不打断渲染流程，且支持根容器、阈值、惰性响应等精细控制。
- 设置
rootMargin: '0px 0px 200px 0px'提前 200px 触发加载，给图片留出解码和绘制时间 - 避免在
callback中直接操作 DOM 属性（如img.src = xxx）后立刻读取 offsetTop 等——这会触发同步布局 - 多个懒加载图片共用一个 Observer 实例，不要为每个 img 单独 new 一个
加载前占位与尺寸预设防抖动
图片加载前若无固定宽高，加载完成时会改变高度，导致下方内容突然下移（layout shift），不仅影响体验，还会被 Chrome 的 CLS（累积布局偏移）指标惩罚。
- HTML 中为
<img>显式声明width和height属性（非 CSS），浏览器可据此预留空间 - 使用
aspect-ratioCSS 属性（现代浏览器支持）或 padding-bottom 百分比技巧维持宽高比占位 - 加载中显示轻量骨架图或纯色背景，避免空白闪烁
加载逻辑做节流与错误降级
网络不稳定或图片 404 时，若不做兜底，可能留下空白或触发无限重试，进一步干扰滚动。
立即学习“Java免费学习笔记（深入）”；
- 对
img.onerror绑定一次处理：替换为默认占位图，或添加data-loaded="error"防止重复尝试 - 加载成功后立即设置
img.decoding = "async"，让解码任务脱离主线程 - 避免在加载回调里执行 heavy 操作（如 canvas 处理、滤镜应用），如有需要，用
requestIdleCallback延后执行
配合现代加载策略协同优化
懒加载不是孤立手段，要和 loading="lazy"、fetchpriority、CDN 缓存策略配合使用：
- 首屏图片禁用懒加载，直接写
<img src="...">；非首屏统一加loading="lazy"作为基础兜底（兼容性好，无需 JS） - 关键图片（如 banner）加
fetchpriority="high"提升请求优先级 - 服务端开启 Brotli 压缩 + 图片 WebP/AVIF 格式响应，减小单图体积，缩短加载耗时
