HTML loading="lazy"属性用法指南

实际上，loading="lazy" 并非简单添加属性即可生效，它更像一个需要多重条件同时满足的“触发开关”。浏览器解析到该属性后，会自动判断布局、可见性及资源地址，任一环节不符合预期，Chrome 便会将其视为普通图片，直接加载。

那么，哪些 能够真正触发原生懒加载？必须同时满足以下所有条件：

• 首先， 必须包含有效的 src 属性，即一个可发起请求的真实 URL。仅靠 data-src 这种方式，浏览器不会识别。
• 其次，图片需具备“可计算的高度”。可以在标签内使用 width 和 height 属性，或在 CSS 中明确设置尺寸，例如 height: 200px 或 aspect-ratio: 16/9。浏览器需要了解图片占位大小，才能合理安排加载时序。
• 第三，图片不能位于首屏可视区域内。若初始可见，懒加载自然失效。同时，父容器不能使用 transform、opacity: 0、visibility: hidden 等属性干扰浏览器对可见性的判断。
• 最后，若使用 元素，loading="lazy" 必须直接添加到内部的 标签上，而非 本身。位置写错，Chrome 不会生效。

以上是生效条件，接下来分析常见的“加了也无效”的情况，遇到问题时可以从以下几个方面排查：

• 若控制台报错 Failed to execute 'observe' on 'IntersectionObserver'，通常是因为图片未设置宽高。Safari 及部分旧版 Chrome 对此较为敏感，会直接跳过懒加载。
• 如果图片位于 display: none 的容器内，懒加载基本失效，因为浏览器无法预测其何时进入视口。临时替代方案是使用 visibility: hidden 配合固定尺寸。
• 此外，检查用户是否在 Chrome 设置中手动关闭了“Enable lazy image loading”，或使用的是 Safari 15.3 及更早版本（稳定支持从 15.4 开始）。
• 另外，若页面通过 document.write() 等旧方法动态注入内容，现代浏览器虽已限制该行为，但遗留代码仍可能导致懒加载异常。

与 JS 懒加载库（如 lozad）能否共存？

答案明确：不能混用。一旦使用 lozad、LazyLoad.js 等 JavaScript 库，必须移除所有 loading="lazy" 属性。原因如下：

• Chrome 检测到原生 loading="lazy" 的同时，又监听了 IntersectionObserver，可能造成请求重复触发，导致图片加载两次或出现卡顿。
• 这些 JS 库通常接管 data-src 到 src 的赋值流程，原生懒加载机制会干扰其核心逻辑，造成混乱。
• 若必须使用 JS 方案，建议直接基于 Intersection Observer API 自行实现，而非依赖第三方库。该方案性能更优，兼容性也更为可控（Firefox 75+、Edge 79+、Safari 15.4+ 均支持）。

最后需留意一个常见误解：懒加载并非等到用户滚动至图片位置才开始下载，而是浏览器根据滚动预测，提前约 1250px 便开始加载。如果需要更激进的提前量（例如希望图片在距离可视区域 200px 时加载），loading="lazy" 无能为力。此时应使用 Intersection Observer，配合 rootMargin 属性实现更精细的控制。