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

HTML原生的`loading="lazy"`属性为图片和iframe提供了简洁高效的懒加载方案，但其实际应用远比“加个属性”复杂：它仅在现代浏览器（Chrome 76+、Firefox 75+、Edge 79+、Safari 15.4+仅限img）中可靠生效，且严格依赖`src`、显式`width`/`height`（或`aspect-ratio`）才能避免布局偏移（CLS）和误判；首屏关键图、背景图、``中的``、SSR场景下的早期渲染、以及iOS Safari 15.4–16.3的滚动抖动等问题均使其不适用——真正考验开发者的是精准识别加载时机、权衡性能与体验，并在原生能力缺口处（如动态插入、伪元素）用IntersectionObserver等方案智能补位。

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

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

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