loading="lazy"仅对初始html中存在且不在首屏视口内的生效；动态渲染、overflow: hidden父容器、标签、srcset/sizes配置错误或首屏关键图误用均会导致静默失效。
HTML 本身没有“按需加载图片”的魔法开关，所谓按需，本质是控制「什么时候发起请求」和「加载哪一张图」；直接写 loading="lazy" 不等于生效，漏掉 sizes、父容器加了 overflow: hidden、或图片是 JS 动态插入的，都会让懒加载静默失效。
为什么 loading="lazy" 写了却没效果
浏览器只对初始 HTML 中已存在、且不在首屏视口内的 <img> 应用懒加载。以下情况会让它完全不触发：
- 图片由 Vue 的
v-for、React 的map()渲染——DOM 是后续挂载的，不属于“初始 HTML” - 父级元素有
overflow: hidden、transform、contain: layout，会干扰 Intersection Observer 判断可视性 - 用了
position: absolute; top: -9999px占位——浏览器认为它“已渲染但不可见”，不走懒加载逻辑 -
<picture></picture>里给<source></source>加了loading="lazy"——该属性只对<img>有效，<source></source>忽略
srcset + sizes 配错，懒加载就白搭
只写 srcset 不配 sizes，浏览器根本不知道这张图在页面里实际占多宽，只能瞎猜（比如默认按 100vw），结果手机用户下了一张 2000w 的桌面图。
-
sizes值必须反映真实占位宽度：侧边栏内一张图固定 300px，就写sizes="300px" - 响应式场景推荐写法：
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" -
srcset中的w描述符（如800w）必须和原图真实像素宽度一致，否则格式切换会错乱 - 首屏关键图（banner、logo）必须删掉
loading="lazy"，否则可能被延迟甚至跳过
自定义懒加载用 IntersectionObserver 怎么不卡主线程
需要精细控制（比如提前 200px 加载、淡入动画、错误回退）时，得自己写，但容易踩坑：
- 初始
<img src="placeholder.svg" style="max-width:90%" style="max-width:90%">—— 宽高必须设，否则加载时布局抖动 - Observer 回调里只做两件事：
el.src = el.dataset.src和observer.unobserve(el) - 别在回调里塞 AJAX、DOM 操作或重绘逻辑，否则滚动时大量触发会卡顿
- 监听前先过滤已在视口内的元素：
document.querySelectorAll('img[data-src]:not(.loaded)')，避免刚进页面就批量加载
preload 和 loading="lazy" 冲突怎么解
想让 banner 图快，又怕它挤占带宽，硬加 loading="lazy" 反而导致首屏空白——这是策略错配。
- 首屏关键图必须禁用
loading="lazy"，并加<link rel="preload" as="image" href="hero.webp"> -
href必须和最终<img>的src完全一致，否则浏览器当两个资源处理，重复下载 - 千万别给
loading="lazy"的图也preload——预加载 + 懒加载 = 自相矛盾 -
decoding="async"对大图很关键，尤其 JPEG，能避免解码阻塞 UI 线程
真正难的不是写对一行 loading="lazy"，而是理解浏览器如何解析 HTML、何时启动预加载器、Intersection Observer 在什么 CSS 环境下失灵——这些细节藏在 DOM 结构和样式组合里，改一个 overflow 属性，整页懒加载就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
