loading="lazy"并非万能，需考虑浏览器兼容性、首屏关键图加载稳定性、srcset/sizes语法正确性、框架属性透传及局部滚动容器限制。
img 标签加 loading="lazy" 就完事了？别急，先看浏览器支持
不是所有浏览器都认 loading="lazy" —— Chrome 76+、Edge 79+、Firefox 75+ 支持，Safari 直到 15.4 才开始部分支持（仅对 <img>，不支持 <iframe>）。老版本 Safari 或微信内置浏览器（X5 内核）直接忽略该属性，不报错也不生效。
所以如果你的用户里还有 iOS 14 及更早设备，或者企业微信/钉钉内嵌页，loading="lazy" 就是摆设。得靠 JS 回退方案兜底，比如用 IntersectionObserver 手动监听进入视口再设置 src。
为什么 loading="eager" 有时反而更稳？
懒加载不是万能银弹。首屏关键图片（比如 banner、头像、商品主图）如果加了 loading="lazy"，在某些网络慢 + 渲染快的组合下，可能被浏览器判定为“非临界”，延迟加载导致白屏或闪动。
这些场景建议显式写 loading="eager"：
立即学习“前端免费学习笔记（深入）”；
- 首屏可见区域内的
<img>（尤其是width/height已固定、无 CSS 覆盖的） - 使用
background-image的伪元素图片（loading属性对它完全无效） - 通过
object-fit: cover裁剪的关键图，懒加载后尺寸重排可能引发 layout shift
和 srcset、sizes 搭配时，顺序和语法不能错
loading="lazy" 必须和其他属性共存，但顺序无关紧要；真正容易出错的是 srcset 和 sizes 的值格式——一旦写错，懒加载会静默失效（浏览器回退到加载 src，但你可能根本没设 src）。
常见错误：
- 漏写
src：有些同学以为srcset足够，结果在不支持srcset的旧环境或懒加载降级逻辑里直接 404 -
sizes值里用了带单位的宽度（如"50vw"正确，"50vw px"错误） -
srcset中图片路径含空格但没编码（cat photo.jpg→ 应为cat%20photo.jpg）
稳妥写法示例：
<img src="cat-small.jpg" srcset="cat-small.jpg 480w, cat-large.jpg 1024w" sizes="(max-width: 480px) 100vw, 50vw" loading="lazy" alt="cat">
Vue/React 里动态生成 img，loading 属性可能被框架过滤
Vue 2 默认不识别 loading 这类非标准 HTML 属性，除非你用 v-bind: 显式绑定；React 则从 16+ 开始支持，但小写驼峰写法必须是 loading（不是 loadingLazy 或 Loading）。
Vue 2 示例（需强制透传）：
<img v-bind:{"loading": "lazy"} :src="url" />
React 示例：
<img src={url} loading="lazy" alt="" />
另外注意：服务端渲染（SSR）时，如果 Node 环境的 React 版本低于 16.11，loading 属性不会被输出到 HTML 字符串里，首屏仍会全量加载。
最麻烦的其实是「混合滚动容器」——比如一个 div 设置了 overflow-y: auto，里面塞了几十张图。这时 loading="lazy" 默认只对 viewport 生效，对这个局部滚动容器无效。真要懒，只能自己用 IntersectionObserver 监听目标容器的 scrollTop 和元素位置算偏移，没有捷径。
