loading="lazy"会静默失效于：缺少宽高属性、父容器含transform/visibility:hidden/opacity:0、置于而非上、用户禁用该功能或旧版safari；首屏关键图启用反致白屏，仅适用于非首屏且尺寸稳定的图片。
loading="lazy" 什么时候会静默失效
加了 loading="lazy" 却没效果，不是浏览器 bug，而是它直接跳过了该属性——常见于以下情况：
-
<img>缺少width和height属性，或 CSS 中未设置明确尺寸（如height: auto不行，aspect-ratio: 16/9可以） - 父容器用了
transform、visibility: hidden或opacity: 0—— 这些不触发重排，但会让浏览器无法准确判断是否“可能进入视口” - 图片在
<picture></picture>内：必须把loading="lazy"放在<img>标签上，而不是<picture></picture>上 - 用户在 Chrome 设置中关闭了 “Enable lazy image loading”，或使用 Safari 15.3 及更早版本（2026 年已基本淘汰，但内网旧终端仍可能出现）
为什么不能对所有图片都加 loading="lazy"
首屏图片加了反而拖慢渲染——浏览器会主动推迟加载，哪怕它本该立刻出现。尤其当 src 指向的是关键 banner、logo 或首屏轮播图时，loading="lazy" 会导致白屏或占位图停留过久。
- 只对「确定不在首屏」且「有稳定宽高比」的图片启用，比如文章正文后半段的配图、分页列表第 2 页起的缩略图
- 模态框（
<dialog></dialog>或display: none容器）里的图片要小心：display: none本身会阻止懒加载触发；改用visibility: hidden+position: absolute等方式隐藏，同时确保尺寸可计算 - 如果用 JS 动态插入图片（如富文本解析后注入），需在插入后手动调用
img.loading = 'lazy'，否则原生机制不会扫描新增节点
想自定义加载时机？IntersectionObserver 更可靠
loading="lazy" 的阈值和行为完全由浏览器控制，不可配置。需要提前加载（比如滚动前 200px 就发起请求）、或兼容老环境（IE / Safari
- 用
IntersectionObserver时，threshold: 0.25表示元素 25% 进入视口即触发，比原生 lazy 更激进；rootMargin: '200px'能等效实现“提前 200px 加载” - 注意：observer 实例不能复用监听大量图片——每个
observe()都有开销；建议按区域分组（如每 20 张图一个 observer）或用防抖节流兜底 - 真实项目中常混合使用：首屏用
loading="eager"（显式声明），非首屏优先loading="lazy"，降级场景 fallback 到 IntersectionObserver
Vue/React 项目里别直接写 loading="lazy"
框架模板编译可能抹掉该属性，或与 SSR 渲染冲突。例如 Vue SFC 中：<img :src="url" loading="lazy"> 在服务端渲染时，loading 可能被忽略；React 中若用 dangerouslySetInnerHTML 插入 HTML，该属性也大概率丢失。
- Vue 推荐用
v-lazy（vue-lazyload）或组合式 API +onMounted(() => { new IntersectionObserver(...) }) - React 推荐封装自定义 Hook：
useImageLazyLoad(ref, { threshold: 0.1 })，内部用useEffect初始化 observer - 静态站点（如 Astro、Hugo）可放心直写
loading="lazy"，只要构建时确保 HTML 输出含该属性且尺寸完整
loading="lazy" 不是开关，而是一个提示信号**。浏览器有权忽略它，且不同版本策略可能变化。上线前务必用 Chrome DevTools 的 Network 面板验证——滚动过程中是否真没发请求，首屏图片是否准时出现。
