加了 loading="lazy" 的 img 标签仅在满足五项条件时才真正懒加载：1. 初始渲染时不在视口内；2. 有明确 width 和 height；3. 父容器未用 transform + overflow: hidden；4. 不是 内的 ；5. 未被 display: none 或 visibility: hidden 包裹。
直接加 loading="lazy" 就能用，但不是所有图片都适合，也不是写了就一定生效。
哪些 img 标签加了 loading="lazy" 才真懒加载
浏览器只对满足以下条件的 <img> 延迟加载：
- 初始渲染时不在视口内（
getBoundingClientRect().top > window.innerHeight） - 有明确的
width和height（内联属性或 CSS 均可；缺一不可，否则 Safari 可能跳过 lazy） - 父容器没用
transform+overflow: hidden（Chrome 会误判滚动根节点） - 不是
<picture></picture>内部的<source></source>（loading只作用于外层<img>） - 没被
display: none或visibility: hidden包裹（位置无法计算）
loading="lazy" 和 srcset 能不能一起用
不仅能，而且必须一起用，否则响应式图可能拉错尺寸、浪费带宽。
-
sizes必须写清楚，比如sizes="(max-width: 768px) 100vw, 50vw"，不能只写"100vw" -
srcset中每个候选图要标宽度，如"small.jpg 480w, medium.jpg 1024w" -
src应设 fallback 图（非空），否则某些浏览器会报 404 - 错误写法：
<img src="big.jpg" srcset="..." loading="lazy">——src指向大图，浏览器 fallback 仍会下它
为什么加了 loading="lazy" 还是全量加载
最常见原因不是代码写错，而是环境或结构不满足前提：
- 用户用 iOS 14.x 或微信内置 WebView（内核≈ Chrome 67），
loading属性被静默忽略 - 图片在 SSR 渲染后被 JS 动态改过
src（浏览器只在 HTML 解析阶段读取该属性） - 首屏图片被误加了
loading="lazy"，浏览器发现它已在视口内，立刻降级为 eager <table> 里或 <code>position: absolute且无contain: layout的祖先，位置不可预测要不要和 JS 懒加载混用
不要。同时存在会导致重复请求：一次由浏览器触发，一次由 JS 触发。
- 如果用了
IntersectionObserver，就删掉所有loading="lazy" - 如果用了
loading="lazy"，就别再给<img>写data-src+ JS 赋值逻辑 - 例外：SSR 页面首次 hydrate 前需检查是否已在视口内（
el.getBoundingClientRect().top ），否则 JS 方案可能漏加载
真正容易被忽略的是：loading 属性不提供加载失败反馈，也不支持提前距离配置；一旦图片挂了，就是空白——而这个“挂了”在 Network 面板里未必显眼，得靠
onerror才能捕获。- 如果用了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
