真正靠谱的无感预加载只有link rel="preload"和new image()两种：前者用于确定关键图的高优先级原生预加载，需写as="image"和绝对路径；后者适用于运行时条件预加载，须先绑事件再赋值src并处理缓存命中。
无感预加载图片，核心是“不阻塞、不渲染、不干扰用户操作”，只让浏览器悄悄把图下进缓存。真正靠谱的只有两种方式：link rel="preload" 和 new Image()，其他方法要么有副作用，要么不可靠。
用 link rel="preload" 声明关键图（最轻量、最推荐）
这是唯一能被浏览器识别为“高优先级资源”的原生方式，适用于你确定某张图会在首屏或交互初期立刻用到的场景（比如 banner、logo、登录按钮图标）。
-
as="image"必须写，否则浏览器当普通 fetch 处理，可能跳过图片特有的缓存策略和解码优化 -
href要用绝对路径或基于 HTML 文档根目录的路径，别写./images/xxx.jpg—— 如果 HTML 在子目录下，这个路径会 404 -
fetchpriority="high"可加可不加，Chrome 101+ 有效，旧版忽略；加了能抢在其他资源前发请求 - 不能写动态值，
href="/assets/${name}.webp"这种模板语法会被当字面量请求，直接失败 - 别和
loading="lazy"同时用，逻辑冲突：一个要提前拿，一个要推迟拿
示例：
<link rel="preload" as="image" href="/assets/hero.webp" fetchpriority="high"><link rel="preload" as="image" href="/assets/logo.png">
用 new Image() 实现运行时可控预加载
适合需要条件判断的场景：比如 hover 某个卡片后预加载详情页大图，或根据 window.devicePixelRatio 加载 @2x 版本。
- 必须先绑定
onload和onerror，再赋值src，否则缓存命中的图会同步触发事件，回调直接错过 - 检查
img.complete：如果为true，说明已缓存，得立刻执行成功逻辑，不能等事件 - 避免在循环里密集
new Image()，浏览器并发请求数通常卡在 6~8 个，建议用 Promise 控制并发（如每次最多 4 个） - 不要长期持有
Image实例引用（比如挂全局变量），否则 GC 不回收，容易内存泄漏
基础封装示例：
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;
});
};
别碰那些“伪无感”方案
以下方法看着简单，但实际都有明显副作用，不是真无感：
-
<img src="xxx.jpg" style="max-width:90%">：会参与 DOM 构建、触发 layout、占用内存，且 onload 不可靠（没绑定就赋值 src 就会丢事件） - CSS background + 负偏移（
background-position: -9999px -9999px）：图片会随 CSS 解析阶段一起加载，拖慢首屏，且无法监听是否成功 -
loading="eager"或decoding="async"：前者只是取消懒加载，后者只影响解码时机，跟“预加载”完全无关
这些方式都绕不开渲染流水线或事件机制缺陷，真要无感，就得用浏览器原生支持的资源声明机制。
WebP 预加载必须带 fallback
如果你用 link rel="preload" 预加载 WebP，但页面里 <img> 标签仍用 JPG 作为兜底，浏览器不会自动 fallback —— 它只会把 WebP 下进缓存，然后该用 JPG 还是用 JPG。
- 预加载 WebP 的同时，确保对应位置的
<img>也用srcset+type做格式协商，例如：<img src="fallback.jpg" srcset="hero.webp 1x, hero@2x.webp 2x" type="image/webp"> - 否则用户看不到 WebP，白预加载了
- 不支持 WebP 的老浏览器（如 IE）根本不会发起预加载请求，所以 fallback 图片本身也得能被正常加载
真正的无感，是连开发者都几乎不用操心加载状态——它只发生在网络层和缓存层，不扰动 JS 执行流，也不改变 DOM 行为。能做到这点的，目前只有 link rel="preload" 和严格按规范写的 new Image()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
