loading="lazy"在Chrome/Firefox/Edge中未延迟请求，是因为浏览器解析时判定图片“即将可见”而跳过懒加载；其生效需满足src为真实URL、宽高明确、父容器无transform/opacity等干扰、且必须写在img标签上。
Chrome/Firefox/Edge 里 loading="lazy" 为什么没触发请求延迟
不是不支持，而是浏览器在解析时已判定该 img “很可能马上可见”，直接跳过懒加载逻辑。Chrome 默认提前加载范围约 1250px，若图片离视口顶部不足这个距离，或页面总高度小于一屏，它就会全量发起请求。
常见静默失效点：
-
src是空值、data:URL 或 JS 动态插入后才赋值——原生 lazy 只在 HTML 解析阶段读取属性，后续改src不触发重判 - 父容器用了
transform、opacity: 0、visibility: hidden或display: none——元素脱离 layout 流，浏览器无法计算位置 -
loading="lazy"写在<picture>或<source>上——必须落在最内层<img>标签上 - 缺少
width和height属性（或 CSS 未设固定尺寸）——Safari 15.4+ 会直接降级为 eager
Safari 15.4+ 中 loading="lazy" 的真实行为边界
Safari 对 loading="lazy" 支持有明确割裂：仅限 <img>，完全不认 <iframe> 的 lazy；且 15.4–16.3 版本存在滚动抖动 bug，16.4+ 才修复。iOS Safari 15.3 及更早、微信 X5 WebView 会彻底忽略该属性，不报错也不生效。
验证是否真生效的硬办法：
立即学习“前端免费学习笔记（深入）”；
- 打开 Safari DevTools → Network 面板 → 刷新页面 → 滚动观察图片请求是否随视口进入而分批出现
- 若首屏外图片在初始请求列表里就全量加载，说明被静默回退了
- 检查 Elements 面板中
<img>是否保留了loading="lazy"字符串——若被 CMS 或构建工具过滤掉，那就根本没传到浏览器
Firefox 75+ 支持但 iframe 仍不懒加载？
Firefox 确实从 75+ 开始支持 loading="lazy"，但它至今（2026年中）**仍不支持 <iframe> 的懒加载**。这是标准实现差异，不是你写错了。Chrome/Edge/Safari（16.4+）支持 <iframe> lazy，Firefox 始终将其视为 eager。
对 <iframe> 生效的前提更苛刻：
- 必须带
width和height属性（不能只靠 CSS） -
src必须是真实可加载的 URL，about:blank或空值不触发 - 父容器不能是
overflow: hidden、height: 0或display: none - 不能在首屏内（哪怕只露出 1px）
所以 Firefox 下想懒加载 iframe，只能用 IntersectionObserver 手动控制 src 注入。
Vue/React 中 loading="lazy" 被过滤或不生效
框架默认不会透传非标准 HTML 属性。Vue 2 完全不识别 loading，React 16+ 支持但要求小写、非驼峰（loadingLazy 无效）。
实操写法：
- Vue 2：
v-bind:{"loading":"lazy"}强制透传，否则编译后消失 - Vue 3 / React：
loading="lazy"可直写，但需确认 SSR 模板未被 CMS 富文本过滤器删掉该属性 - 动态插入的
<img>：必须在挂载 DOM 前就设置好loading="lazy"，插入后再 setAttribute 不触发原生逻辑
真正容易被忽略的是：某些 HTML 压缩中间件（如某些 CDN 配置）会 strip 掉未知属性，loading 就这样无声消失了。
