如何用图片懒加载技术减少首屏带宽占用提升交互速度-js教程-PHP中文网

loading="lazy"仅对满足三条件的标签生效：普通内容图、非iframe/Shadow DOM内、有明确src；Safari 15.4前需IntersectionObserver降级；必须预留宽高防布局抖动。

如何用图片懒加载技术减少首屏带宽占用提升交互速度

图片懒加载不是“加个属性就完事”，关键在 loading="lazy" 的实际生效条件和 fallback 方案是否可靠——它在 Safari 15.4+ 之前完全不支持，且对背景图、picture 内嵌源无效。

哪些图片能直接用 `loading="lazy"` 安全生效

只有满足全部三个条件的标签才真正触发原生懒加载：

必须是普通内容图（非 CSS background-image）
不能在 iframe 或 Shadow DOM 内部
必须有明确的 src（不能只靠 srcset 或 data-src）

常见误用：却没写 src，此时浏览器会立即下载第一个 srcset 项，loading="lazy" 形同虚设。

Chrome/Firefox 支持但 Safari 需要 polyfill 的真实场景

Safari 直到 15.4 才支持 loading="lazy"，而国内大量 iOS 用户仍卡在 15.0–15.3。此时必须降级：

检测 'loading' in HTMLImageElement.prototype 判断原生支持
不支持时，用 IntersectionObserver 监听进入视口事件
务必把 data-src 转为 src 后再触发加载，避免重复解析

示例关键逻辑：

MagicForm

MagicForm是一款用于创建智能表单、线索问答和销售资格筛选的 AI 表单工具。

下载

if (!('loading' in HTMLImageElement.prototype)) {
  const io = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        io.unobserve(img);
      }
    });
  });
  document.querySelectorAll('img[data-src]').forEach(img => io.observe(img));
}