HTML图片懒加载：loading=lazy属性使用教程

HTML原生的`loading="lazy"`属性为图片和iframe提供了简洁高效的懒加载方案，但在实际应用中远非“一加了之”：它仅在现代主流浏览器（Chrome 76+、Firefox 75+、Edge 79+、Safari 15.4+仅限img）中可靠生效，且严格依赖`src`和明确的宽高（或`aspect-ratio`）以防止布局偏移（CLS）；首屏关键图、背景图、``中的``、SSR场景下的早期渲染节点等均不适用，甚至可能因JS加载时机或滚动行为异常（如iOS Safari旧版抖动）适得其反；当原生能力覆盖不到时，IntersectionObserver仍是兜底利器——真正考验开发者的是精准识别每张图片的加载优先级、上下文约束与性能权衡，而非简单堆砌属性。

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

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

Chrome 76+、Firefox 75+、Edge 79+ 原生支持；Safari 直到 15.4 才开始支持，且仅限 ，不支持