loading="lazy"是浏览器原生懒加载方案，仅对非首屏且具明确宽高的<img>和<iframe>生效，需Chrome 76+、Firefox 75+、Safari 15.4+支持，必须配合width/height防CLS，不适用于首屏关键图或background-image等场景。
loading="lazy" 是浏览器原生支持的懒加载方案，无需 JS、不依赖库，对图片和 iframe 有效。它在现代浏览器中已稳定可用（Chrome 76+、Firefox 75+、Safari 15.4+），是当前最轻量、最安全的首屏优化手段。
什么时候该用 loading="lazy" 而不是 IntersectionObserver
直接用 loading="lazy" 的前提是：你加载的是普通图片或 iframe，且不需要自定义加载逻辑（比如占位图、错误重试、统计曝光、或兼容老浏览器）。
- ✅ 适合：商品列表图、文章配图、非首屏 banner、评论头像等「可延迟、无交互依赖」的图片
- ❌ 不适合：首屏关键图（如 LCP 元素）、轮播主图、用户头像（可能影响社交感知）、需要监听加载状态的场景
- ⚠️ 注意：Safari 15.4 之前不支持，iOS 15.4 以下 Safari 会忽略该属性，但不会报错——相当于退化为正常加载
loading="lazy" 必须配合 width 和 height 属性
不设尺寸会导致布局偏移（CLS），这是 Core Web Vitals 中明确扣分项。浏览器无法预留空间，图片加载后页面会“跳一下”，损害体验和 SEO。
- 正确写法：
<img src="cat.jpg" loading="lazy" width="600" height="400" alt="Cat"> - 响应式场景下，可用
aspect-ratio替代（style="aspect-ratio: 3/2;"），但需注意 Safari 15.4+ 才支持 - 如果宽高不确定（如 CMS 动态图），至少预估一个合理比例，用
height="auto"+width或 CSSaspect-ratio控制占位
常见错误与兼容性兜底建议
单独加 loading="lazy" 并不能解决所有问题，尤其在混合技术栈中容易踩坑：
- ❌ 错误：同时保留
data-src+loading="lazy"却没删掉 JS 懒加载逻辑 → 图片被加载两次 - ❌ 错误：在 Vue/React 中动态渲染
img时，loading属性未被正确透传（某些 SSR 框架或旧版 Vue 2 指令会过滤该属性） - ✅ 兜底：对不支持
loading="lazy"的环境（如微信内置浏览器旧版本），可检测'loading' in HTMLImageElement.prototype，降级为 IntersectionObserver - ✅ 安全组合：用
loading="lazy"作为默认策略，仅对首屏关键图显式设置loading="eager"（Chrome 77+ 支持）
真正容易被忽略的是：即使用了 loading="lazy"，如果图片 URL 本身带 query 参数（如 ?v=20260519）或 CDN 缓存配置不当，仍可能触发重复请求或缓存失效。懒加载只是调度时机，不是资源治理的终点。
