首屏图片必须显式设置 loading="eager" 或删除 loading 属性，因 safari 等浏览器可能真延迟加载导致白屏，ssr 框架也可能跳过预加载，进而引发 lcp 下降与关键图像未渲染问题。
首屏 <img> 加了 loading="lazy" 就变慢，不是配置错了，是根本不能加——必须删掉或显式设为 loading="eager"。
为什么首屏图加 loading="lazy" 会白屏甚至不加载
浏览器对首屏 <img> 的懒加载行为并不统一：Chrome 和 Firefox 会忽略该属性、按 eager 处理，但 Safari（尤其是 iOS 16.3 及更早）可能真把它当 lazy，等滚动才触发请求；SSR 框架（如 Next.js/Nuxt）在 hydration 前检测到 loading="lazy"，可能跳过预加载逻辑，导致 HTML 里写了 src 却没发请求。
- Network 面板里首屏图状态长期 pending，LCP 指标暴跌
- Google Search Console 报“关键图像未及时渲染”
- 页面刚打开时 banner 区域空白几秒，再突然出现
哪些图绝对不能加 loading="lazy"
所有明确处于初始视口内的图片，都必须排除懒加载。这不是“建议”，而是硬性要求：
- 首页 banner、产品主图、logo、登录页验证码图
- 任何通过 SSR 或静态生成直接写入 HTML 的首屏
<img> -
<picture></picture>中的<img>标签（loading只在<img>上生效，<source></source>上写了也无效）
注意：loading="eager" 要显式写出来，别依赖默认行为——Safari 对未声明 loading 的处理不稳定，尤其旧版本。
真正生效的 loading="lazy" 有硬性前提
它不是“加了就懒”，而是一套条件组合。缺任意一条，浏览器就会回退到 eager 加载，但你已经承担了属性解析和 IntersectionObserver 初始化开销：
-
<img>必须在初始 HTML 中静态存在，不能是 JS 动态插入（比如v-for渲染后挂载） - 必须有明确的
width和height属性（不能用 CSS 设置，也不能是auto或百分比） - 父容器不能有
overflow: hidden、transform、opacity: 0、visibility: hidden - 不能和
<link rel="preload">冲突——href 和 src 查询参数稍有不同（如一个带?v=1，一个没带），就会重复下载
优化首屏图加载的实操组合拳
单靠删掉 loading="lazy" 不够，得配合其他手段确保关键图真正“快”：
- 对首屏关键图加
<link rel="preload" as="image" href="banner.webp">，href 必须与<img src>完全一致（含协议、域名、路径、查询参数） - 宽高属性保留，同时用
style="aspect-ratio: 16 / 9; width: 100%;"兼顾响应式和 CLS 控制 - 避免在
放同步脚本，否则会阻塞 HTML 解析，连带延迟<img>请求发起时机 - 如果用了 WebP/AVIF，用
<picture></picture>+<source></source>fallback，但loading="eager"只写在最外层<img>上
最容易被忽略的是：Safari 15.4 之前完全不识别 loading 属性，你写的 lazy 在那里等于没写，但写的 eager 依然有效——所以首屏图显式声明 loading="eager" 是跨浏览器安全底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
