首屏图片必须设为loading="eager"或省略该属性，否则SSR框架可能跳过预加载、Safari旧版本不识别、动态插入失效，且需满足width/height、无transform/overflow干扰等硬性条件才能真正懒加载。
loading="lazy"会让首屏图变白屏甚至不加载
加了 loading="lazy" 的首屏 <img>，浏览器会直接忽略该属性，但部分 SSR 框架（如 Nuxt、Next.js）在 hydration 阶段可能因检测到该属性而跳过预加载逻辑，导致首屏无图。更糟的是，Safari 15.4 之前完全不识别这个属性，你写了等于没写；而 Chrome 和 Firefox 在首屏内仍按 eager 行为处理——但若图片被动态插入（比如 Vue v-for 渲染后才挂载），它压根不会触发加载。
常见表现包括：src 请求迟迟不发、控制台 Network 面板里首屏图片始终 pending、LCP 指标暴跌、Google Search Console 报告“关键图像未及时渲染”。
- 首屏图必须显式设为
loading="eager"，或干脆不写（默认即 eager） - banner、logo、商品主图、登录页验证码图，一律禁用
loading="lazy" - 服务端输出的 HTML 中，首屏
<img>必须静态存在、带宽高、无 transform/overflow 干扰
loading="lazy"真正生效的硬性条件
它不是“写了就懒”，而是满足一整套前提才会延迟加载：图片不在初始 HTML 中？失效。没写 width 和 height？Safari 15.4+ 直接拒懒。父容器有 overflow: hidden 或 transform？IntersectionObserver 判定失败，回退 eager。图片离视口太近（比如第二屏顶部）？Chrome 可能提前约 1250px 就拉取，看起来像没懒。
- 必须是初始 HTML 解析时就存在的
<img>，动态插入（innerHTML、v-for、map()）一律不生效 -
width和height属性不可省，不能用 CSS 设置，也不能是auto或百分比 -
loading="lazy"只能加在<img>上，<source>或<picture>标签上加了等于白写 - 避免父级设置
transform、opacity: 0、visibility: hidden、overflow: hidden
和 preload 冲突会导致重复请求
给一张已设 loading="lazy" 的图再加 <link rel="preload" as="image">，浏览器会把它当两个独立资源处理：preload 提前拉一次，lazy 触发时再拉一次。尤其当 href 和 src 查询参数不一致（比如一个带 ?v=1，一个没带），重复下载不可避免。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 首屏关键图只用
<link rel="preload">，删掉loading="lazy" -
href值必须与对应<img src>完全一致（含协议、域名、路径、查询参数） - 必须带
as="image"，否则浏览器当普通脚本处理，不提升优先级 - 非首屏图不要 preload，否则浪费带宽且干扰资源调度
兼容性差的旧浏览器会静默 fallback 到 eager
Safari 15.4 之前、iOS 16.4 之前、macOS 13.3 之前的 Safari，会把 loading 当作未知属性直接丢弃。你写了 loading="lazy"，它照样 eager 加载——但问题在于，你可能同时配了 srcset + sizes 依赖懒加载时机做尺寸决策，结果旧 Safari 全部拉最大图，流量和耗时双双爆炸。
- src 必须指向合理 fallback 尺寸（如 800px WebP），不能只放 placeholder
- 不要单独依赖
loading="lazy"实现响应式，srcset+sizes必须共存 - 旧版 Safari 不支持
loading，也不支持decoding="async"，这两项优化需 JS fallback
最常被忽略的一点：loading 属性本身不解决布局偏移（CLS）。如果图片没设宽高，哪怕加了 lazy，加载后仍会撑开页面。宽高 + loading + srcset + sizes，四者缺一不可。
