最简单方案是使用 loading="lazy" 属性，仅对 <img> 和 <iframe> 有效，Chrome 76+、Firefox 75+、Edge 79+ 及 Safari 15.4+ 原生支持；旧版 Safari 或 iOS 微信需降级为 IntersectionObserver 方案，并注意 SEO 与首屏关键图不懒加载。
用 loading="lazy" 属性最简单，但要注意浏览器兼容性
现代浏览器（Chrome 76+、Firefox 75+、Edge 79+）原生支持 loading="lazy"，只需在 <img> 标签里加这个属性即可触发懒加载：
<img src="photo.jpg" loading="lazy" alt="描述">
它只对 <img> 和 <iframe> 生效；loading="eager" 是默认行为，显式写出来没意义。
常见错误是把它加在背景图或 CSS background-image 上——无效，CSS 不识别该属性。
兼容性方面：Safari 直到 15.4 才支持 loading="lazy"，iOS Safari 15.4+ 也才开始支持。老版本 Safari 或微信内置浏览器（尤其 iOS 微信）大概率不生效，得 fallback。
立即学习“前端免费学习笔记（深入）”；
需要兼容旧浏览器？用 IntersectionObserver 手动监听进入视口
这是目前最可靠、可自定义的方案，适用于所有支持 IntersectionObserver 的环境（Chrome 51+、Firefox 55+、Safari 12.1+、Edge 79+）。微信安卓版基本都支持，iOS 微信 7.0.12+ 也已支持。
核心逻辑是：初始时把真实图片地址存在 data-src，src 设为空或占位图；等元素进入视口时，再把 data-src 赋给 src。
实操建议：
- 给所有待懒加载的
<img>加上class="lazy"和，src可设为src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="（1px 透明 GIF） - 初始化
IntersectionObserver时传入{ rootMargin: "0px 0px 100px 0px" }，提前 100px 加载，避免滚动过快时“闪现” - 观察到目标后立即调用
unobserve()，避免重复触发 - 记得给图片加
width和height（或 aspect-ratio），防止布局偏移（CLS）
srcset 和 sizes 要和懒加载配合，否则高清屏可能加载错图
如果用了响应式图片，仅改 src 不够：srcset 和 sizes 也得一并从 data- 搬过来，否则浏览器可能按空 src 或占位图尺寸选错资源。
正确做法是统一存为 data-src、data-srcset、data-sizes，然后在 observer 回调里全部赋值：
img.src = img.dataset.src;<br>if (img.dataset.srcset) img.srcset = img.dataset.srcset;<br>if (img.dataset.sizes) img.sizes = img.dataset.sizes;
漏掉 srcset 在 Retina 屏上常表现为图片模糊；漏掉 sizes 则可能导致浏览器始终选最小分辨率资源。
服务端渲染或静态站点要注意：别让爬虫看到空 src
搜索引擎爬虫（尤其是 Googlebot）对 loading="lazy" 支持良好，但对 JS 懒加载不一定执行。如果用 IntersectionObserver 方案，且首页关键图片（如 banner）也懒加载，可能被当成无图页面，影响 SEO。
稳妥做法：
- 首屏图片不懒加载（去掉
class="lazy"或不设data-src） - 或者服务端判断 User-Agent，对主流爬虫直接输出真实
src - 用
<link rel="preload">提前提示关键图片资源（仅对原生loading="lazy"有辅助作用）
真正容易被忽略的是：懒加载不是“越早加越好”，而是要分场景权衡。首屏内容、LCP 元素、SEO 关键图，都不适合懒加载——这点比代码怎么写更重要。
