loading="lazy"在ios 15.3及更早、微信x5、qq旧版、钉钉/企业微信webview等环境中完全静默失效，须用'loading' in htmlimageelement.prototype检测并回退至intersectionobserver方案。
原生 loading="lazy" 在 iOS 15.3 及更早、微信 X5、QQ 旧版、钉钉/企业微信 WebView、Safari 15.3 及以下等环境里**完全静默失效**——不是报错，是浏览器压根不识别该属性，也不触发任何降级逻辑。必须用特性检测 + 回退方案，不能只靠写上就完事。
怎么准确判断 loading 属性是否被支持
别查 navigator.userAgent，UA 字符串易伪造、难维护。用标准特性检测最稳：
-
'loading' in HTMLImageElement.prototype返回true→ 可安全加loading="lazy" - 返回
false→ 包括 IE 全系、Safari 15.3、所有 iOS 14 及以下、X5 内核等，必须走IntersectionObserver回退 - 这个检测只需在页面初始化时执行一次，放在
<script></script>或DOMContentLoaded里即可
IntersectionObserver 回退必须避开的三个坑
不是套个 IntersectionObserver 就算完成，常见翻车点：
-
root设为null（即默认 viewport）时，若父容器有overflow: hidden或transform，Observer 可能完全收不到回调——得显式传入滚动容器作为root - 图片初始
src已是真实地址，浏览器可能在 HTML 解析阶段就发了请求；回退方案必须从空src或占位图（如data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=）起步，等isIntersecting === true后再赋值真实 URL - 没设
rootMargin，默认触发太保守（尤其 Safari），快速滚动时图片还没进视口就已滑过——建议至少设"200px"提前加载
Vue/React 中 loading 属性透传失败怎么办
框架层常过滤非标准属性，导致 SSR 或运行时丢失：
- Vue 2 默认不透传
loading，必须写成v-bind:{"loading":"lazy"}或升级到 Vue 3 - React 16.11+ 支持，但 SSR 场景下若服务端 React 版本低于 16.11，
ReactDOMServer.renderToString输出中就不会出现该属性——直接检查输出 HTML 即可验证 - Next.js / Nuxt 等启用图片优化（如
next/image）时，会接管loading行为，此时原生属性实际无效
首屏图片加 loading="lazy" 导致白屏或 LCP 暴跌
这不是配置问题，是根本不能加——所有明确处于初始视口内的图片，都必须显式设为 loading="eager" 或删掉该属性：
- Safari（尤其 iOS 16.3 及更早）可能真把首屏
loading="lazy"当真，延迟请求，造成 banner 白屏几秒 - SSR 框架（如 Next.js）在 hydration 前若看到
loading="lazy"，可能跳过预加载逻辑，HTML 里写了src却不发请求 - 真正生效的
loading="lazy"有硬前提：图片必须静态存在于初始 HTML、有明确width/height、父容器不能含transform/overflow: hidden—— 缺一条就降级为 eager，但你已承担解析开销
兼容性兜底不是“加个 polyfill”就结束，关键在于：首屏图必须绕过懒加载逻辑，非首屏图要确保 src 初始为空或占位图，且 IntersectionObserver 的 rootMargin 和 root 设置正确。这些细节一旦漏掉，回退方案就会和原生 lazy 一样失效——只是不报错而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
