loading="lazy"在现代浏览器中管用，但仅对Chrome 76+、Firefox 75+、Safari 15.4+等支持该属性的浏览器生效，且必须满足图片为普通<img>标签、有明确src、初始不在视口、具备宽高属性等条件才真正延迟加载。
loading="lazy" 在 <img> 标签里到底管不管用
管用，但只在现代浏览器中生效，且对离视口太远的图片才真正延迟加载。它不是 JavaScript 懒加载的替代品，而是浏览器原生支持的轻量级优化手段——不需要写一行 JS，也不依赖第三方库。
哪些 <img> 标签加 loading="lazy" 才有效
只有满足以下条件的图片才会被懒加载：
- 必须是普通
<img>标签，<picture>或背景图（background-image）不支持该属性 - 必须有明确的
src或srcset，空src或仅靠 JS 动态设置会失效 - 不能出现在
<iframe>内或 Shadow DOM 中（部分浏览器暂不支持） - Chrome 76+、Firefox 75+、Safari 15.4+ 支持；IE 完全不支持，Edge 79+ 跟 Chrome 一致
loading="lazy" 和 loading="eager" 怎么选
默认值是 loading="eager"（立即加载），所以首屏关键图片不用加任何属性；只有明显在视口下方、滚动后才可能看到的图片才值得加 loading="lazy"。
常见误用场景：
立即学习“前端免费学习笔记（深入）”；
- 给轮播图第一张图加
loading="lazy"→ 首屏白屏或闪烁 - 给
width/height缺失的图片加 lazy → 可能触发布局抖动（layout shift） - 在 SSR 渲染中盲目批量加 lazy → 某些服务端渲染框架（如 Next.js）已自动处理首屏，重复加反而干扰
建议搭配 width 和 height 属性或 CSS aspect-ratio 使用，避免重排。
和 IntersectionObserver 手动懒加载比，差在哪
loading="lazy" 是声明式、零配置的，但控制粒度粗：
- 无法自定义触发阈值（比如提前 200px 开始加载），浏览器自己决定
- 无法监听加载状态（
onload/onerror仍可用，但没提供 loading 中间态） - 不支持 fallback 图片或占位逻辑（比如先显示低质量图 LQIP）
- 某些 CDN 或图片服务（如 Cloudflare Images）会忽略该属性，直接返回响应头
Content-Disposition: inline类行为
如果业务需要精确控制、兼容老浏览器、或配合渐进式加载策略，还是得上 IntersectionObserver + src 动态赋值。
最常被忽略的一点：loading="lazy" 不会阻止图片请求发出，只是推迟发起时机；如果图片 URL 本身带错误（比如 404 或 CORS 失败），控制台依然会报错，且不会自动重试。
