loading="lazy"仅在初始HTML中存在、不在首屏、有明确宽高、父容器无transform/overflow:hidden等干扰时生效；src为空、JS动态插入、缺失sizes、absolute隐藏等均导致失效。
loading="lazy"什么时候会失效
写了loading="lazy但图片照常全量加载，不是浏览器bug，而是触发条件被破坏了。它只在「初始 HTML 中存在、不在首屏、有明确width和height、父容器没干扰样式」时才真正延迟。
-
src为空、是data:开头的 base64 或占位符（如src="#"）——浏览器无法发起懒加载请求 - 父容器用了
transform、will-change: transform或overflow: hidden——滚动根被破坏，浏览器失去位置判断依据 - 图片由 JS 动态插入（React/Vue 渲染、
document.createElement）——不属于初始 DOM，原生懒加载不接管 -
srcset写了但没配sizes——旧版 Chromium 会降级为 eager 加载，Safari 更容易出问题 - 用
position: absolute+top: -9999px模拟隐藏——浏览器认为它“已渲染”，不触发懒加载
首屏关键图必须显式声明 loading="eager"
别信“默认就是 eager”。Safari（尤其 iOS 16.3 及更早）对未声明loading的
- Hero 图、Logo、头像、核心按钮图标，必须同时写
loading="eager"和 -
preload的href必须和src完全一致，否则当成两个资源重复下载 - 禁止给
loading="lazy"的图加preload——预加载和懒加载逻辑冲突，反而增加资源竞争 - 如果用了响应式图片（
loading="lazy"只能写在
如何验证 lazy 是否真起作用
不能只看 Network 面板有没有延迟请求。重点验证两点：是否按滚动节奏触发、是否被浏览器原生接管。
- 在 Elements 面板中右键目标
loading值，观察是否触发重新评估 - 用
getBoundingClientRect()检查图片top值，若远大于window.innerHeight却已发请求，说明被绕过（常见于 SSR 后 JS 覆盖src） - 打开 DevTools 的 Rendering 面板 → 勾选 “Paint flashing”，滚动时看图片区域是否出现绿色闪动——这是浏览器 layout 后才触发加载的视觉证据
- 禁用 JS 后刷新页面，若图片仍能按滚动延迟加载，说明是原生 lazy 在生效；若全部不显示，说明依赖 JS 注入，
loading="lazy"根本没起作用
兼容性兜底不是简单补 IntersectionObserver
直接在所有浏览器里都上IntersectionObserver + data-src切换，会导致 Chrome/Firefox/Safari 新版本里图片加载两次：一次原生 lazy，一次 JS 手动赋值src。
- 先检测支持性：
'loading' in HTMLImageElement.prototype，只对不支持的环境挂载 observer - observer 回调里只做两件事：
img.src = img.dataset.src和observer.unobserve(img)，别加 class、触发动画、调 API - 监听前过滤已在视口内的元素：
Array.from(images).filter(img => img.getBoundingClientRect().top > window.innerHeight) - 手写方案要自己处理
srcset/sizes/DPR，多数项目没必要——真要兼容 iOS 14 或微信 X5 内核，不如用decoding="async"+ 服务端降级图
原生loading="lazy"的边界很清晰：它不提供占位、不支持失败重试、不能自定义阈值、也不保证后台标签页中一定加载。工程化落地时，最易被忽略的是「初始 HTML 存在性」和「父容器合成层干扰」——这两点一错，整页懒加载就退化为摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
