loading="lazy"仅对初始HTML中非首屏、有宽高、父容器无干扰样式的生效；首屏关键图须设loading="eager"并配合preload；缺失宽高、transform、JS动态插入等会导致退化为立即加载。

直接加 loading="lazy" 不等于图片真会延迟加载——它只对初始 HTML 中存在、不在首屏、有明确宽高、父容器没干扰样式的 生效；其他情况大概率退化为立即加载，甚至引发白屏。

哪些 必须写 loading="eager"

首屏关键图不显式声明 loading="eager"，Safari（尤其 iOS 16.3 及更早）可能跳过加载，导致 Banner 白屏、Logo 缺失、头像不显示。这类图包括：

• Banner 主图、网站 Logo、用户头像、核心按钮图标
• 必须同时配 ，且 href 和 完全一致
• 禁止给 loading="lazy" 的图再 preload——逻辑冲突，触发重复请求

loading="lazy" 失效的硬性条件

写了属性却全量加载，通常是因为触发了以下任一限制：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 缺少 width 和 height（内联或 CSS 均可），浏览器无法推断尺寸，部分 Safari 直接降级为 eager
• 父容器用了 transform、will-change: transform 或 overflow: hidden，破坏滚动根检测
• 图片是 JS 动态插入的（如 React map()、Vue v-for 渲染），不属于初始 HTML
• 错把 loading="lazy" 写在 上——该属性只对 有效
• 图片在 内部（ 中），Chrome 对表格子元素懒加载支持极弱

  想提前加载？原生 loading="lazy" 不支持偏移

  原生 lazy 没有类似 rootMargin 的配置项，它只在图片进入视口时才加载，浏览器内部用固定阈值（通常约 1250px 下方）。如果你需要“离视口还有 200px 就加载”，必须换方案：

  • 放弃 loading="lazy"，改用 IntersectionObserver + data-src
  • rootMargin: '200px' 表示上下各扩展 200px，图片离视口还有 200px 就触发加载
  • HTML 必须写成：，不能留空 src
  • 必须设宽高或 aspect-ratio，否则布局抖动不可控

  真正要注意的是：懒加载不是万能优化，它依赖浏览器原生实现，无法精确控制加载时机或失败重试；如果业务需要更精细的控制（比如加载中占位、错误 fallback、自定义阈值），还是得上 IntersectionObserver + 手动 src 注入。

  或

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！