预加载图片是提前下载进缓存以实现秒出，正确方式包括：1. 用在中预加载首屏关键图；2. 用new image()动态预加载；3. 用软预加载非首屏必显图；url必须完全一致才能命中缓存。
预加载图片不是“让图早点显示”，而是让浏览器提前把图下载进缓存，等真正用到时能秒出。做错方向（比如滥用 loading="lazy"）反而会让首屏图更慢。
用 <link rel="preload"> 加首屏关键图
这是唯一能在 HTML 解析早期就发起请求的方式，适用于 banner、logo、登录主图这类用户打开页面瞬间就要看到的资源。
-
as="image"必须写，否则浏览器当普通 fetch 处理，无法复用图片缓存策略 -
href必须是绝对路径或根相对路径（如/assets/hero.webp），不能写./hero.jpg—— 路径错直接 404 -
fetchpriority="high"在 Chrome 109+ 有效，能压过部分 CSS/JS 请求；旧版忽略无副作用 - 别和
loading="lazy"同时用：逻辑冲突，浏览器可能直接忽略preload - 不能放在
里，必须写在中，否则被忽略
用 new Image() 做运行时条件预加载
适合轮播滑动到第 3 页时预加载第 4、5 页，或 hover 商品卡片时预载详情页大图——<link> 静态，它动态可控。
- 顺序不能错：先绑定
onload/onerror，再赋值src；否则缓存命中时事件同步触发，回调被跳过 - 检查
img.complete：为true说明已缓存，需立刻走成功逻辑，不能只等 onload - 并发要节制：浏览器同域通常只允许 6–8 个连接，批量预加载建议用 Promise 队列，每次最多 4 个
- 别写成
new Image().src = url一行完事——失败不可知，也无法await
用 <img loading="eager"> 做非首屏但必显图的软预加载
比如折叠面板展开后必显示的图、Tab 切换后立即呈现的内容图。它们不属于首屏，但用户点击后不能等网络延迟。
-
loading="eager"是默认行为，显式写出更明确，且能避免被父级loading="lazy"继承影响 - 确保这些
<img>标签在 DOM 中位置靠前（比如放在<main></main>开头），浏览器解析到就会开始请求 - 不要加
display: none或visibility: hidden——部分浏览器会推迟 eager 加载，直到元素进入渲染流 - 可配
decoding="async"防止解码阻塞主线程，但不影响下载时机
最容易被忽略的一点：预加载的 URL 和最终 <img src> 必须完全一致，包括大小写、斜杠、query 参数（如 ?v=20261001）。哪怕只是多一个空格，缓存就不命中，等于白加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
