loading="lazy"仅控制请求时机，不预留空间，必须配合aspect-ratio或width/height防CLS，且需协同srcset/sizes选图，否则小屏仍加载大图或触发布局偏移。

loading="lazy" 是现代浏览器中实现图片懒加载最轻量、最可靠的方式，但必须配合 aspect-ratio 和 srcset 才能真正适配响应式场景——否则要么布局跳动，要么小屏仍下载大图。

为什么只加 loading="lazy" 会失效

它只控制请求时机，不预留空间。图片未加载时 <img> 高度为 0，后续内容上移；等图一加载完，“啪”一下下坠，这就是 CLS（累积布局偏移）。尤其在移动端 Safari 上，若没设 width/height 或 aspect-ratio，部分版本甚至直接忽略 loading="lazy"。

• 必须搭配 width: 100% 和 height: auto，否则 Safari 可能不触发懒加载
• loading="lazy" 对 background-image 完全无效，只作用于 <img> 和 <iframe>
• 首屏关键图（如 banner、主视觉）要显式写 loading="eager" 或省略该属性，否则可能被误延迟

aspect-ratio 必须写在容器上，且需降级兼容旧 Safari

直接给 <img> 设 aspect-ratio 不稳定，推荐用包裹容器控制比例，同时兼顾老浏览器 fallback。

• 现代写法：.img-container { aspect-ratio: 16 / 9; width: 100%; }
• Safari ≤15.4 不支持 aspect-ratio，得用 padding-top hack：height: 0; padding-top: 56.25% + position: relative + 子元素 position: absolute
• 必须加 @supports (aspect-ratio: 1) 包裹现代样式，否则旧浏览器会因解析失败导致整个规则失效
• 别用 min-height 替代 —— 它无法响应宽度变化，断点切换时比例就崩了

srcset + sizes 才是响应式懒加载的核心协同点

懒加载只是“什么时候加载”，srcset 和 sizes 决定“加载哪一张”。两者缺一不可，否则懒加载后仍可能拉下 3MB 的桌面图到手机上。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• sizes 值必须是有效媒体查询，例如：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
• srcset 中的 w 描述符要和 sizes 匹配，浏览器才按当前视口宽度选最小够用资源
• 每个 <source>（如果用 <picture>）也必须带 media 和明确的 width/height，否则 Safari 可能忽略匹配
• WebP/AVIF 格式优先，JPEG 仅作兜底；CDN 需开启格式协商（Accept header 自动降级）

IntersectionObserver 仅用于需要提前加载或动画联动的场景

原生 loading="lazy" 已覆盖 90% 场景。只有当你需要：提前 200px 加载、配合淡入缩放动画、或监听加载完成状态做其他逻辑时，才引入 JS。

• 别监听 scroll 事件做懒加载——性能差、易卡顿、触发强制同步布局
• 观察器回调里别直接改 src，应等 img.onload 触发后再加 loaded 类，否则动画播完了图还没出来
• 用 img.dataset.src 存真实地址，src 指向极小占位图（如 data:image/gif;base64,...），避免初始 layout shift
• 移动端 Safari 对 will-change: opacity 仍有偶发卡顿，过渡动画里别加它

最容易被忽略的是：所有懒加载图片容器都必须可预测高度，且 prefers-reduced-motion 查询必须参与动画控制——否则系统关闭动画时，页面仍在强行播放淡入效果。