link rel="preload" 是唯一真正符合“后台静默预加载图片”意图的标准方式，需满足四条件：不渲染、不占布局、仅下载进缓存、as="image" 显式声明，且须置于 head 中静态存在、路径准确、服务端配 cache-control。
link rel="preload" 是唯一真正符合“后台静默预加载图片”意图的标准方式。其他写法要么是延迟加载（如 loading="lazy"），要么是伪预加载（如 display: none + img），要么根本不可控（如 prefetch with as="document"）。
用 link rel="preload" 声明关键图，必须满足四个硬条件
它不渲染、不占布局、只下载进内存/HTTP 缓存，且浏览器会按图片策略解码和缓存——这才是真正的静默预加载。
-
as="image"必须显式写出，缺了会被当普通 fetch 处理，失去图片专用缓存和优先级调度 - 路径必须静态准确：相对路径基于 HTML 文件位置解析，比如 HTML 在
/user/profile.html，就别写./images/hero.jpg，应写/images/hero.jpg或绝对 URL - 必须放在
中，且 HTML 初始解析时就存在；动态插入（如document.head.appendChild()）基本无效 - 服务端响应头需含
Cache-Control: public, max-age=31536000，否则 Chrome 会拒绝缓存，每次 reload 都重请求
示例：
<link rel="preload" as="image" href="/assets/logo.webp" fetchpriority="high"><link rel="preload" as="image" href="/assets/banner.jpg">
用 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" 当预加载用
这是最普遍的误解。loading="lazy" 是推迟加载，不是提前加载。哪怕你给首屏 <img> 显式加上它，Chrome 仍可能等到滚动前 500px 才发起请求——完全违背预加载目标。
-
loading="eager"是默认行为，写了也没错，但它只是“不懒”，不等于“提前” -
decoding="async"只影响解码时机（避免主线程卡顿），和下载时机无关 - 把
<img>写成display: none或position: absolute; top: -9999px，浏览器认为它“已渲染但不可见”，照样不会提前请求
WebP 预加载必须带 fallback，且不能只靠 preload
link rel="preload" 不支持 srcset 或格式协商，所以单写 href="/assets/hero.webp" 会导致 Safari / Firefox 用户白屏。
- 必须配合
<picture></picture>+<source type="image/webp"></source>+<img>fallback 使用 - 如果想预加载 WebP，就得同时
preload对应的 fallback 图（如 JPG），否则旧浏览器没图可取 - 不要为了“省流量”只预加载 WebP：现代 CDN 通常对 WebP 做了压缩优化，体积反而比 JPG 小 30%~50%
真正容易被忽略的是：预加载本身不解决尺寸错配问题。如果你没在 <img> 上写 width/height 或 CSS 尺寸，即使图片已缓存，浏览器仍要回流重排——静默加载了，但没秒出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
