loading="lazy"仅对初始HTML中存在、不在首屏、具明确宽高、父容器无transform/overflow:hidden等干扰样式的生效；缺宽高、动态插入、错写于或内、首屏图滥用均导致退化为eager加载，甚至白屏；首屏关键图须显式设loading="eager"并配完全一致的preload。
直接加 loading="lazy" 不等于图片真会延迟加载——它只对初始 HTML 中存在、不在首屏、有明确宽高、父容器没干扰样式的 <img alt="HTML中如何让图片元素实现延迟加载" > 生效；其他情况大概率退化为立即加载，甚至引发白屏。
哪些图片必须写 loading="eager"
首屏关键图不显式声明 loading="eager"，Safari（尤其 iOS 16.3 及更早）可能跳过加载，导致 Banner 白屏、Logo 缺失、头像不显示。这类图包括：
- Banner 主图、网站 Logo、用户头像、核心按钮图标
- 必须同时配
<link rel="preload" as="image" href="xxx">，且href和<img src alt="HTML中如何让图片元素实现延迟加载" >完全一致 - 禁止给
loading="lazy"的图再 preload——逻辑冲突，触发重复请求
loading="lazy" 失效的硬性条件
写了属性却全量加载，通常是因为触发了以下任一限制：
-
<img alt="HTML中如何让图片元素实现延迟加载" >缺少width和height（内联或 CSS 均可），浏览器无法推断尺寸，部分 Safari 直接降级为 eager - 父容器用了
transform、will-change: transform或overflow: hidden，破坏滚动根检测 - 图片是 JS 动态插入的（如 React
map()、Vuev-for渲染），不属于初始 HTML - 错把
loading="lazy"写在<source></source>上——该属性只对<img alt="HTML中如何让图片元素实现延迟加载" >有效 - 图片在
<table> 内部（<code><td> 或 <code><tr> 中），Chrome 对表格子元素懒加载支持极弱 <h3>想提前加载？原生 <code>loading="lazy"不支持偏移原生 lazy 没有类似
rootMargin的配置项，它只在图片进入视口时才加载，浏览器内部用固定阈值（通常约 1250px 下方）。如果你需要“离视口还有 200px 就加载”，必须换方案：立即学习“前端免费学习笔记（深入）”；
- 放弃
loading="lazy"，改用IntersectionObserver+data-src -
rootMargin: '200px'表示上下各扩展 200px，图片离视口还有 200px 就触发加载 - HTML 必须写成：
<img src="data:image/svg+xml,%3Csvg%3E" alt="...">，不能留空src - 必须设宽高或
aspect-ratio，否则布局抖动不可控
验证是否真正生效，别只看 Network 面板
真正起作用的信号有两个：
- DevTools → Network → 勾选
Disable cache，刷新后滚动，观察图片请求是否明显滞后于页面加载完成时间 - Elements 面板中右键图片节点 →
Break on attribute modifications，滚动时若看到src被浏览器动态设置，说明原生 lazy 在接管 - Lighthouse 的「Offscreen images」建议消失 ≠ 懒加载生效，它只检查属性是否存在，不校验行为
最易被忽略的一点：移动端必须声明
<meta name="viewport">，否则 WebView 可能忽略loading属性或降级处理；而服务端渲染（SSR）场景下，原生 lazy 仍有效，但 JS 方案要等 hydration 完成才启动，存在首屏闪动风险。 - 放弃
