预加载图片是让资源提前进浏览器缓存，而非提前显示；仅首屏关键图（如banner、logo）才适用，须置于、用绝对或根相对路径、避免与loading="lazy"混用；非首屏必显图用，运行时按需预加载则用new image()并规范事件绑定顺序。
预加载图片不是“让图早点显示”，而是“让图的资源提前进浏览器缓存”。关键判断：只有首屏立刻要用的图才值得预加载，其他场景用 loading="eager" 或 new Image() 更合适。
用 <link rel="preload"> 在 HTML 解析早期触发请求
这是唯一能抢在 DOM 构建前发起图片请求的方式，适用于 banner、logo、登录主图等用户打开页面瞬间就该看到的资源。
-
as="image"必须写，否则浏览器当普通 fetch 处理，无法复用图片缓存策略 -
href必须是绝对路径或根相对路径（如/assets/hero.webp），不能写./hero.webp—— HTML 在子目录下时会 404 -
fetchpriority="high"对 Chrome 109+ 有效，能压过部分 CSS/JS 请求；旧版忽略无副作用 - 必须写在
里，放在中会被浏览器忽略 - 别和
loading="lazy"同时用——逻辑冲突，浏览器可能直接跳过 preload
用 new Image() 控制运行时预加载时机
当你需要根据用户行为（比如 hover、轮播滑动）、设备特性（window.devicePixelRatio）或状态（模块展开）决定是否加载时，new Image() 是唯一可控的选择。
- 顺序不能错：先绑定
onload/onerror，再赋值src；否则缓存命中时事件同步触发，回调被跳过 - 检查
img.complete：为true说明已缓存，需立刻走成功逻辑 - 并发要节制：浏览器同域通常只允许 6–8 个并发连接，批量预加载建议用 Promise 队列，每次最多 4 个
- 别把
new Image().src = url当一行写完——失败不可知，也无法await
别把 loading="lazy" 或 display: none 当预加载用
这是最常踩的坑。loading="lazy" 是推迟加载，Chrome 可能等到滚动前 500px 才发请求；display: none 会让部分浏览器推迟 eager 加载，直到元素进入渲染流。
-
loading="eager"是默认行为，显式写出更明确，且可避免被父级loading="lazy"继承影响 - 非首屏但确定会用的图（如折叠面板展开后必显），用
<img loading="eager">+ 靠前 DOM 位置实现“软预加载” - 确保这些
<img>标签在 DOM 中位置靠前（比如放在<main></main>开头），浏览器解析到就会开始请求 - 不要加
display: none或visibility: hidden—— 它们不触发下载，只是隐藏渲染结果
真正容易被忽略的是路径一致性：预加载的 href 和最终 <img src> 必须完全一致，包括大小写、斜杠、query 参数。Webpack/Vite 自动哈希后，硬编码的 href 会失效；SSR 动态生成路径时， 中的 preload 也得由同一逻辑生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
