loading="lazy"仅适用于img和iframe且需src属性，Chrome76+、Firefox75+、Edge79+及Safari15.4+（仅img）支持；首屏图、背景图、picture内source等不适用，须配合width/height防CLS，SSR中需注意JS加载时机。

HTML 原生 loading="lazy" 在现代浏览器中可以直接用，但不是所有场景都适用，尤其要小心 SSR、图片尺寸缺失和 Safari 旧版本兼容问题。

哪些浏览器支持 loading="lazy"

Chrome 76+、Firefox 75+、Edge 79+ 原生支持；Safari 直到 15.4 才开始支持，且仅限 ，不支持 。iOS Safari 15.4–16.3 存在滚动抖动 bug，16.4+ 修复。

• 服务端渲染（SSR）页面中，若首屏图片被误标为 lazy，可能因 JS 未加载完就触发懒加载逻辑而延迟加载
• 没有明确设置 width 和 height 的图片，可能导致布局偏移（CLS），即使加了 loading="lazy" 也一样
• 通过 CSS 设置 display: none 或父容器 overflow: hidden 的图片，部分浏览器会跳过懒加载检测，直接加载

loading="lazy" 必须配合 src 和尺寸属性才可靠

只写 loading="lazy" 不够。浏览器需要知道图片占位空间，否则可能错判可视区域或触发回流。

• 必须设置 width 和 height 属性（非 CSS），或使用 aspect-ratio + width（注意 Safari 15.4+ 支持）
• src 不能为空或占位符 URL（如 data:image/gif;base64,...），否则 Chrome 会忽略 loading="lazy"
• 响应式图片建议用 srcset + sizes，loading="lazy" 与之完全兼容，无需额外处理

@@##@@

什么时候不该用 loading="lazy"

首屏关键图片、CSS 背景图、 内嵌的 标签都不支持该属性 —— 它只对 和 生效，且仅当它们有 src 时才起作用。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 轮播图第一张、Banner 图、登录表单旁的验证码图，属于用户进入即需看到的内容，加 loading="lazy" 反而增加首屏延迟
• > 中，只有 标签能加 loading， 加了也无效
• 通过 JS 动态插入的 元素，如果插入时已处于视口内，部分浏览器（如旧版 Firefox）可能仍会懒加载，导致闪白

替代方案：JS 懒加载还能怎么补漏

原生 loading="lazy" 不覆盖的场景（比如背景图、伪元素、动态插入图），得靠 IntersectionObserver。

• 监听 IntersectionObserver 时，建议设 rootMargin: "50px" 提前加载，避免用户快速滚动时图片“追着进视口”
• 避免在 observe() 前就给 img.dataset.src 赋值真实地址，否则可能触发预加载，失去懒加载意义
• 服务端渲染项目中，可用 decoding="async" 配合 loading="lazy" 进一步降低主线程解码压力

真正麻烦的不是怎么加 loading="lazy"，而是判断哪张图该加、哪张不该加，以及加了之后有没有悄悄破坏 CLS 或首屏渲染节奏 —— 这些没法靠一个属性自动解决。

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