真正可控的批量预加载必须用 new Image() 主动触发，需控制并发数（建议3–4张）、确保URL完全一致、先绑事件再赋值src，并检查img.complete；link rel="preload"仅适用于静态首屏图，不支持动态批量场景。
批量预加载图片不能靠 <img> 标签堆砌，也不能用 loading="lazy" 伪装——它必须由 JavaScript 主动触发，且需控制并发、路径一致性与缓存命中率。
用 new Image() 批量触发下载（最常用）
这是唯一能精确控制「哪些图、何时下、是否成功」的方式。浏览器对 new Image() 赋值 src 的行为会立即发起请求，不渲染、不占布局，只进缓存。
- 必须先绑定
onload/onerror，再赋值src，否则缓存命中时事件直接同步触发，回调被跳过 - 要检查
img.complete：为true说明已缓存，需立刻执行成功逻辑 - 避免在循环里密集
new Image()—— 浏览器并发请求数通常限 6~8 个，建议每次最多预加载 3–4 张 - URL 必须完全一致：预加载用
slide-2.jpg?v=20260930，后续轮播切换时也得用一模一样的 URL，否则缓存不命中
示例封装：
const preloadImages = (urls) => {
return Promise.allSettled(
urls.map(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;
});
})
);
};
// 预加载当前页 + 左右各一张
preloadImages(['slide-0.jpg', 'slide-1.jpg', 'slide-2.jpg'])
.then(results => {
const failed = results.filter(r => r.status === 'rejected');
if (failed.length) console.warn('部分图片预加载失败', failed);
});
<link rel="preload"> 不适合批量场景
它只在 HTML 解析阶段生效，且不支持动态路径或数组展开。你没法写 <link rel="preload" as="image" href="${urls[i]}">>，浏览器会当字面量处理，导致 404。
立即学习“前端免费学习笔记（深入）”；
- 必须写在
<head>中，且标签是静态的 —— 每张图都要手写一条<link> - 只适用于首屏确定的关键图（如 banner、logo），数量超过 3 张就明显违背设计初衷
- 漏写
as="image"会导致 Priority 降为 Low，Network 面板里 Initiator 显示为parser而非preload，实测延迟增加 200–400ms - 路径必须绝对或基于 HTML 文档位置准确解析，
./images/hero.jpg在子目录下极易 404
别踩这些坑
很多“预加载”方案其实根本没生效，只是看起来像：
-
loading="eager"不等于预加载 —— 它只是取消懒加载，仍等 HTML 解析到该<img>才开始请求 - 把
<img src="x.jpg" style="display:none">当预加载，既浪费初始带宽，又无法监听成败，还可能被 Lighthouse 报告为「隐藏内容影响性能」 - CSS background 预加载（如
background: url(x.jpg) no-repeat -9999px -9999px）无法确认是否完成，且所有图随页面一起加载，拖慢首屏 - 用
fetch()下载图片 blob 再转objectURL，虽可行但需手动URL.revokeObjectURL()，否则内存泄漏风险高，小图都不推荐
真正可控的批量预加载，始终围绕 new Image() 展开：路径校验、并发节制、错误兜底、URL 严格一致 —— 少一个环节，缓存就白建了。
