loading="lazy"仅对和生效，其他标签无效；首屏图须设loading="eager"或preload；宽高缺失、父容器样式、动态插入、错用、绝对定位等均导致失效；rootmargin需用intersectionobserver实现。

loading="lazy"只对和

加在、

、上完全无效，浏览器会静默忽略——既不报错，也不延迟任何东西。你看到按钮没变化，不是配置错了，是它本来就不支持。

真正能用的只有这两个标签：<img> 和 <iframe></iframe>。其他所有元素想“懒”，得靠 JS 控制逻辑，不是加个属性就能解决。

写了loading="lazy"但图片还是全量加载？检查这五点

• width 和 height 缺失或设为 %/vw —— Safari 直接退化为 eager，布局还会抖动
• 图片被包在 overflow: hidden + transform 的父容器里 —— Chrome 误判滚动根节点，永远不触发
• 图片是 Vue v-for、React map() 或 JS 拼字符串后 innerHTML 插入的 —— 不属于初始 HTML，原生 lazy 不认
• loading="lazy" 错写在 <source></source> 上 —— 它只作用于最外层 <img> 标签
• 用了 position: absolute; top: -9999px 占位 —— 浏览器判定“已渲染但不可见”，跳过懒加载检测

首屏图千万别加loading="lazy"

首屏 Hero、Logo、商品主图这些，必须显式写 loading="eager"，不能依赖默认行为。Safari（尤其 iOS 16.3 及更早）可能把没声明的图也懒掉，导致白屏。

更稳妥的做法是：<link rel="preload" as="image" href="hero.webp"> 放在 里，且 href 必须和对应 <img src> 完全一致（含查询参数），否则算两个资源，重复下载。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

想提前加载？rootMargin 不是 loading="lazy" 的属性

loading="lazy" 不支持 rootMargin，你写 style="root-margin: 200px" 或 data-root-margin 都无效。

要实现“滚动到图上方 200px 就开始加载”，必须放弃原生 lazy，改用 IntersectionObserver 手动控制：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: "200px 0px 0px 0px" });

注意：每个目标加载完必须调用 unobserve()，否则持续监听已加载元素，内存泄漏风险高。

复杂点在于，懒加载不是“加个属性就完事”的开关，而是涉及宽高声明、父容器样式、SSR 渲染时机、srcset 匹配、预加载协同的一整套链路；任何一个环节断开，loading="lazy" 就只是个摆设。

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