原生 loading="lazy" 在 chrome 76+、firefox 75+、edge 79+、safari 15.4+ 中可用，但 safari 15.3 及更早、微信 x5、qq 旧版、钉钉/企业微信 webview 等环境会静默忽略该属性；应使用 'loading' in htmlimageelement.prototype 特性检测，而非 ua 判断，并配合 intersectionobserver 回退方案。
原生 loading="lazy" 在 Chrome 76+、Firefox 75+、Edge 79+、Safari 15.4+ 中可用，但 Safari 15.3 及更早、微信 X5、QQ 旧版、钉钉/企业微信 WebView 等环境会静默忽略该属性——不是报错，是根本没读取，必须用特性检测 + JS 回退。
怎么准确判断浏览器是否支持 loading 属性
别查 navigator.userAgent，UA 字符串易伪造且维护成本高。用原生特性检测最稳：
if ('loading' in HTMLImageElement.prototype) —— 这个判断在页面初始化时执行一次即可。IE 所有版本返回 false，Safari 15.3 返回 false，Chrome 75 返回 false，结果完全符合实际行为。
注意：这个检测只反映浏览器是否“认识”该属性，不保证它一定按预期工作（比如父容器用了 transform 仍可能失效）。
IntersectionObserver 回退方案的三个关键避坑点
手动实现懒加载不是加个 IntersectionObserver 就完事，常见翻车场景：
-
root设为null（即默认 viewport）时，若图片父容器有overflow: hidden或transform，Observer 可能完全收不到回调——得显式传入滚动容器作为root - 图片初始
src已是真实 URL，浏览器在 HTML 解析阶段就发了请求，isIntersecting回调只是“事后通知”，起不到懒加载作用——必须初始设为空或占位图（如data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=），再由 JS 在回调中赋值img.src = img.dataset.src - 没设
rootMargin，默认触发太保守（尤其 Safari），快速滚动时图片刚进视口就已滚过——建议至少设"200px"提前加载
Vue/React 中 loading 属性透传失败怎么办
框架层常过滤非标准属性，导致 SSR 或运行时丢失 loading：
Vue 2 默认不透传，必须写成 v-bind:{"loading":"lazy"}；Vue 3 支持直接写 loading="lazy"。
React 16.11+ 支持，但 SSR 场景下若服务端 React 版本低于 16.11，ReactDOMServer.renderToString 输出中就不会出现该属性——可直接检查输出 HTML 验证。
Next.js / Nuxt 若启用了图片优化（如 next/image），它们内部会接管 loading 行为，此时写原生属性会被覆盖或忽略。
哪些图片必须禁用 lazy 或强制 eager
首屏关键图一旦加了 loading="lazy"，可能被浏览器判定为“非关键资源”而延后加载，造成白屏或 CLS（布局偏移）：
- banner 主图、logo、用户头像等首屏内图片——必须显式设
loading="eager"或干脆不写该属性（默认就是 eager） - 通过
background-image加载的图——loading属性对其无效，需用 CSS@media (prefers-reduced-data)或 JS 动态插入 - 包裹在
<picture></picture>中的图——loading只能写在最外层<img>上，<source></source>不识别该属性 - SVG 或 base64 图片——无网络请求，
loading被忽略
真正容易被忽略的是：动态插入的图片（如分页加载、无限滚动），即使写了 loading="lazy"，也建议插入后立即用 getBoundingClientRect().top 判断是否已在视口内，手动触发加载，否则可能卡在“等滚动”状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
