是最直接可靠的图片预加载方式，适用于首屏关键图；new image()用于运行时条件预加载；loading="lazy"或display: none无法实现预加载，反而延迟加载。
link rel="preload" 是最直接、最可靠的 HTML 图片预加载方式，适用于你明确知道某张图会在首屏或关键交互中立即使用的情况；new Image() 是运行时可控的补充手段，适合按条件、批量、或需监听成败的场景。别指望 loading="lazy" 或 display: none 的 <img> 标签能实现预加载——它们干的是相反的事。
用 link rel="preload" 声明首屏关键图
这是语义最准、开销最小、Lighthouse 可识别的方式，但必须满足几个硬性条件才能生效：
-
as="image"缺一不可，否则浏览器当普通 fetch 处理，不走图片缓存和解码流程 - 必须写在
里，越靠前越好；路径必须是静态绝对路径（如/assets/hero.webp），不能含 JS 模板（如/assets/${name}.jpg）或相对路径（如./images/logo.png） -
fetchpriority="high"在 Chrome 101+ 有效，可抬高请求优先级；旧版忽略无副作用 - 常见错误：给已加
loading="lazy"的<img>同时配preload，逻辑冲突，浏览器可能直接忽略preload
示例正确写法：
<link rel="preload" as="image" href="/assets/logo.webp" fetchpriority="high">
用 new Image() 实现运行时条件预加载
当你需要根据用户行为（比如 hover）、设备特性（如 window.devicePixelRatio）、或状态（如轮播图切换后）来决定是否加载某张图时，Image 对象是唯一可控的选择。
- 顺序不能错：先绑定
onload/onerror，再赋值src；否则缓存命中时事件同步触发，回调直接丢失 - 检查
img.complete：为true表示已缓存，需立刻执行成功逻辑，而不是等事件 - 避免密集创建：浏览器并发请求数通常只有 6~8 个，循环中大量
new Image()会排队阻塞；建议用 Promise 队列控制并发（例如每次最多 4 个） - 基础封装示例：
const preloadImage = (url) => {return new Promise((resolve, reject) => {const img = new Image();img.onload = () => resolve(img);img.onerror = () => reject(new Error(`Failed to load ${url}`));img.src = url;});};
别把 loading="lazy" 或隐藏 <img> 当预加载用
这是最常踩的坑。设置 loading="lazy" 是告诉浏览器“这张图可以等滚动快到它时再发请求”，Chrome 默认延迟约 500px —— 和预加载目标完全相反。
-
loading="eager"只是取消懒加载，不等于提前加载；它仍遵循 HTML 解析顺序，在 DOM 构建到该节点时才发起请求 -
decoding="async"只影响解码时机（防主线程卡顿），对下载时机毫无影响 - 用
style="display: none"的<img>标签，本质仍是普通图片加载，没有提前触发机制，且可能被 Lighthouse 误判为冗余资源 - 如果发现首屏图“迟迟不出”，第一反应不是加预加载，而是检查是否误加了
loading="lazy"
WebP 预加载必须带 fallback，且注意资源优先级
WebP 虽然体积小，但并非所有浏览器都支持。单独预加载 WebP 而不提供 fallback，会导致 Safari 等浏览器白屏或报错。
- 用
link rel="preload"时，只预加载 WebP 不解决兼容问题；必须配合<picture></picture>或 JS 特性检测做降级（如 fallback 到 JPEG） - 不要为了省带宽而把 WebP 和 JPEG 都
preload，这会浪费请求和缓存空间；应只预加载主用格式，fallback 由实际渲染逻辑触发 - 预加载资源有优先级上限，过多
preload会挤占关键 CSS/JS 的带宽；建议单页不超过 3~4 个，且仅限真正首屏必需的图 - 轮播图等动态组件推荐“滑动后立刻预加载相邻图”，而非初始化就全量预加载——平衡首次加载速度与后续体验
真正难的不是写对一行 link 或一个 new Image()，而是判断哪张图值得预加载、什么时候加载、以及加载失败时有没有兜底方案。这些决策比代码本身更影响最终效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
