用法极简：给 img 加 loading=lazy 即可，浏览器会在图片接近可视区域时才发起请求。它对长列表页面效果显著：一篇文章配图二十张，首屏只加载前两三张，其余的等用户滚动到位再下载，带宽和加载时间双双下降。这是 HTML 原生能力，不需要任何 IntersectionObserver 代码。
懒加载的隐性收益是性能指标：LCP（最大内容绘制）不会被屏外图片拖累，Core Web Vitals 评分更好看。但要注意首屏可见的图片不要加 lazy，否则反而延迟首屏渲染。要做更精细的控制仍可用 IntersectionObserver 自定义方案：加骨架占位、加淡入动效、对背景图懒加载，这些浏览器原生属性都做不到。
<style> .lazy { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; background: #f0f0f0; } </style> <p>下面的图片带 loading=lazy，向下滑动才会开始加载：</p> <img class="lazy" loading="lazy" src="https://picsum.photos/600/300" alt="懒加载示例图一"> <img class="lazy" loading="lazy" src="https://picsum.photos/600/301" alt="懒加载示例图二"> <img class="lazy" loading="lazy" src="https://picsum.photos/600/302" alt="懒加载示例图三"> <img class="lazy" src="https://picsum.photos/600/303" alt="这张不懒加载，首屏立刻请求">