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 才开始支持，且仅限 <img alt="HTML怎么懒加载图片_HTML loading=lazy属性支持【方法】" >，不支持 <iframe></iframe>。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"与之完全兼容，无需额外处理
<img src="photo.jpg" srcset="photo-small.jpg 480w, photo-large.jpg 1024w" sizes="(max-width: 480px) 480px, 1024px" width="1024" height="683" loading="lazy" alt="示例图">
什么时候不该用 loading="lazy"
首屏关键图片、CSS 背景图、<picture></picture> 内嵌的 <source></source> 标签都不支持该属性 —— 它只对 <img alt="HTML怎么懒加载图片_HTML loading=lazy属性支持【方法】" > 和 <iframe></iframe> 生效，且仅当它们有 src 时才起作用。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 轮播图第一张、Banner 图、登录表单旁的验证码图，属于用户进入即需看到的内容，加
loading="lazy"反而增加首屏延迟 -
<picture>><source srcset="..."><img src="..." alt="HTML怎么懒加载图片_HTML loading=lazy属性支持【方法】" ></source></picture>中，只有<img alt="HTML怎么懒加载图片_HTML loading=lazy属性支持【方法】" >标签能加loading，<source></source>加了也无效 - 通过 JS 动态插入的
<img alt="HTML怎么懒加载图片_HTML loading=lazy属性支持【方法】" >元素，如果插入时已处于视口内，部分浏览器（如旧版 Firefox）可能仍会懒加载，导致闪白
替代方案：JS 懒加载还能怎么补漏
原生 loading="lazy" 不覆盖的场景（比如背景图、伪元素、动态插入图），得靠 IntersectionObserver。
- 监听
IntersectionObserver时，建议设rootMargin: "50px"提前加载，避免用户快速滚动时图片“追着进视口” - 避免在
observe()前就给img.dataset.src赋值真实地址，否则可能触发预加载，失去懒加载意义 - 服务端渲染项目中，可用
decoding="async"配合loading="lazy"进一步降低主线程解码压力
真正麻烦的不是怎么加 loading="lazy"，而是判断哪张图该加、哪张不该加，以及加了之后有没有悄悄破坏 CLS 或首屏渲染节奏 —— 这些没法靠一个属性自动解决。
