loading="lazy"仅适用于视口外非首屏图片，如正文底部配图、商品列表第三屏后缩略图等；首屏关键图（如banner）禁用，否则致白屏；须搭配width/height和decoding="async"防布局抖动与解码阻塞。
loading="lazy" 能用，但不是所有图片都适合加——加错地方反而拖慢首屏，甚至触发重复加载或布局抖动。
哪些图片必须加 loading="lazy"
只对「当前视口外、非首屏关键内容」的图片生效且安全。典型场景包括：
- 文章正文内滚动到底部才出现的配图
- 商品列表页中第 3 屏之后的缩略图
- 折叠区域（如「查看更多」展开后才渲染的图片）
- 通过 JS 动态插入、初始不显示的
<img>
错误示例：<img src="hero-banner.jpg" loading="lazy"> —— 首屏大图加了它，浏览器可能延迟加载，导致白屏或 FOUC。
哪些情况不能直接用 loading="lazy"
原生懒加载有明确限制，硬加会失效或出问题：
- 父容器设置了
overflow: hidden或transform，可能阻断 Intersection Observer 检测，图片永远不加载 - 在
iframe内嵌页面中，loading="lazy"不被识别（多数浏览器仍忽略） - 使用了
srcset+sizes但没配width/height，会导致 layout shift，即使懒加载也影响 CLS - 服务端渲染（SSR）时未预设
decoding="async"，图片解码仍可能阻塞主线程
loading="lazy" 必须搭配的属性
单加 loading="lazy" 是半残废状态，至少补上这两项：
-
width和height：防止加载时重排，浏览器能预留空间 -
decoding="async"：让图片解码不阻塞主线程，尤其对大图有效
正确写法示例：
@@##@@
兼容性兜底与真实加载时机
loading="lazy" 在 Chrome 76+、Firefox 75+、Edge 79+ 原生支持；Safari 直到 15.4 才完全支持，iOS 15.0–15.3 仅部分支持。更重要的是：
- 它依赖浏览器内置的 Intersection Observer，不保证「一滚动就触发」——实际加载可能滞后 1–2 屏
- 没有加载失败回调，
onerror事件仍需手动监听并 fallback - 不会自动处理 WebP fallback，
<picture></picture>内每个<source></source>都得单独加loading="lazy"
真正要稳，首屏外图片仍建议用轻量 JS 方案（如 IntersectionObserver + data-src）做可控加载，而不是全盘依赖原生 lazy。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
