loading="lazy"仅在同时满足四个条件时生效：图片有有效src、可计算高度、初始不在视口内、未被干扰样式隐藏，且必须写在而非上。
loading 属性不是“加了就懒加载”的开关，它只在特定条件下由浏览器主动触发延迟请求。不满足条件时，Chrome、Firefox 会直接忽略该属性，当成普通 <img> 处理。
哪些图片加了 loading="lazy" 才真能懒加载
必须同时满足这四个硬性条件，缺一不可：
-
<img>标签有真实有效的src（不能只靠data-src） - 图片有可计算的高度——通过
width和height属性，或 CSS 中设置了固定height、aspect-ratio，或父容器有明确尺寸约束 - 初始渲染时不在视口内（即首屏外），且父级没用
transform、visibility: hidden、opacity: 0等干扰可见性判断的样式 - 不在
<picture></picture>外层——如果用了<picture></picture>，loading="lazy"必须写在内部的<img>上，而不是<picture></picture>标签上
loading="lazy" 常见静默失效原因
页面加了但所有图照常全量加载？先看这些：
- 浏览器控制台出现
Failed to execute 'observe' on 'IntersectionObserver'错误 → 很大概率是图片没设宽高，Safari 或旧版 Chrome 直接跳过懒加载逻辑 - 图片包裹在
display: none的容器里 → 浏览器无法预估它何时可见，loading="lazy"完全不生效；改用visibility: hidden+ 明确尺寸可临时绕过 - 用户手动关闭了 Chrome 的 “Enable lazy image loading” 设置，或用的是 Safari 15.3 及更早版本（稳定支持从 15.4 开始）
- 图片在局部滚动容器中（比如
<div style="overflow-y: scroll">）→ <code>loading只监听window滚动，对局部滚动无感知，此时必须换IntersectionObserverloading="lazy"和srcset/sizes能不能一起用能，而且推荐一起用——但要注意写法和时机：
- 必须把
srcset、sizes和loading="lazy"写在同一个<img>标签上，浏览器会在懒加载触发那一刻，根据当前视口宽度 +sizes计算结果，从srcset中选最匹配的资源 - 如果只写
loading="lazy"却没配srcset，移动端可能仍拉取桌面尺寸的大图，浪费带宽 - CDN 或 HTML 压缩中间件可能 strip 掉
loading属性（尤其当它被识别为“未知属性”），上线前务必检查生成后的 HTML 源码是否还存在该属性
和 JS 懒加载库混用会出什么问题
绝对不要混用。一旦引入
lozad.js、LazyLoad这类库，就必须移除所有loading="lazy"：- Chrome 检测到两者共存时，可能重复发起请求：原生机制先发一次，JS 库再发一次，导致图片加载两次或卡顿
- JS 库通常接管
data-src→src的赋值流程，而原生loading机制仍试图读取空src，造成逻辑冲突 - 若需更细粒度控制（如提前 200px 加载、失败重试、渐入动画），优先用原生
IntersectionObserverAPI，而非第三方库——它性能更好，且现代浏览器（Firefox 75+、Safari 15.4+、Chrome 76+）已全覆盖
最容易被忽略的一点：
loading="lazy"的预加载距离是浏览器固定的（目前 Chrome 约提前 1250px），你没法调。需要更激进或更保守的触发时机，只能切到IntersectionObserver并配rootMargin。 - 必须把
