HTML中img懒加载实现 HTML中img标签loading属性

现代浏览器（Chrome 76+、Edge 79+、Firefox 75+、Safari 15.4+）已原生支持loading="lazy"，但iOS Safari 15.4前及微信旧版WebView不识别；仅对<img>和<iframe>生效，须配合src/srcset使用，且需确保图片有明确宽高以防误加载。

img loading="lazy" 浏览器原生懒加载是否可用

现代浏览器（Chrome 76+、Edge 79+、Firefox 75+、Safari 15.4+）已原生支持 loading 属性，但兼容性仍有缺口。iOS Safari 在 15.4 之前完全不识别该属性，且部分 Android WebView（如微信内置浏览器旧版本）会忽略它。启用后，loading="lazy" 仅对 <img> 和 <iframe> 生效，其他元素无效。

• 必须配合 src 或 srcset 使用，否则无实际加载行为
• 不支持动态插入的图片自动触发懒加载，需手动设置属性后再挂载到 DOM
• 若图片在视口内初始渲染时已满足加载条件，浏览器可能仍会立即加载（非强制延迟）
• loading="eager" 可显式关闭懒加载，用于首屏关键图

loading="lazy" 和 IntersectionObserver 手动实现的区别

原生 loading 是浏览器级优化，由渲染引擎直接控制资源请求时机；而 IntersectionObserver 是 JS 层监听滚动 + 手动替换 src，可控性更强但有额外开销。

• 原生方案无需 JS，无 FOUC 风险，也无监听器注册/销毁逻辑
• IntersectionObserver 可自定义阈值、根容器、延迟回调，还能配合占位图、错误重试、渐入动画
• 原生不提供加载状态反馈（如 loading 中、加载失败），JS 方案可精确捕获 onload / onerror
• 某些场景下（如瀑布流中图片高度未知），原生 lazy 可能误判位置，导致提前或延迟加载

哪些图片不该加 loading="lazy"

不是所有图片都适合懒加载。加了反而影响体验或 SEO。

• 首屏核心内容中的图片（如 banner、logo、商品主图）应设为 loading="eager" 或直接省略该属性
• 通过 CSS background-image 加载的图片不受 loading 属性控制，此属性只作用于 HTML <img> 的 src
• srcset + sizes 组合使用时，loading="lazy" 依然生效，但需确保各尺寸资源路径有效，否则 fallback 失败
• 服务端渲染（SSR）页面中，若首屏图片被标记 lazy，部分搜索引擎爬虫（尤其旧版）可能不抓取，建议首屏图片保留 eager

实际部署时容易忽略的细节

loading="lazy" 看似简单，但上线后常因边缘情况出问题。

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

• 图片 URL 含查询参数（如 image.jpg?version=2）时，缓存策略需同步更新，否则 lazy 加载可能命中过期资源
• 使用 CDN 时，确认其未主动 strip 掉 loading 属性（某些 HTML 压缩中间件会过滤未知属性）
• Vue/React 等框架中，用 v-bind 或 JSX 动态绑定时写法要正确：:loading="isLazy ? 'lazy' : 'eager'，不能写成 :loading="isLazy"（布尔值会被转成字符串 "true"/"false"，无效）
• 开发环境 Chrome DevTools 的 Network 面板默认不显示 lazy 延迟发起的请求，需勾选 “Disable cache” 并滚动触发，或在 Elements 面板观察 src 是否被浏览器自动填充

真正起效的关键不在属性有没有写上，而在图片是否具备可计算的布局高度——如果父容器或图片自身没宽高，浏览器无法预估位置，可能跳过懒加载逻辑直接加载。