Promise 可优雅实现图片异步预加载，核心是用 new Promise 封装 Image 的 load/error 事件；支持单图预加载、批量并行加载（Promise.all 保序）、容错重试及缓存优化。

Promise 可以优雅地实现图片异步预加载，核心是用 new Promise 封装 Image 对象的 load 和 error 事件，把图片加载过程变成可链式调用、可统一处理的成功/失败逻辑。

封装单张图片的预加载函数

创建一个返回 Promise 的函数，接收图片 URL，内部创建 Image 实例并监听加载状态：

• 成功时 resolve 图片元素（便于后续插入 DOM 或获取尺寸）
• 失败时 reject 错误信息（包含 URL 和错误原因）
• 记得设置 img.src 触发加载，且在事件监听后赋值，避免低版本浏览器错过事件

示例代码：

function preloadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
    img.src = src; // 放在事件绑定之后
  });
}

批量预加载多张图片并保证顺序

使用 Promise.all 并行加载所有图片，结果数组按传入顺序排列，适合需要全部就绪后再统一操作的场景：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

• 传入图片 URL 数组，map 转为 Promise 数组
• Promise.all 成功则得到已加载的 Image 实例数组
• 任一失败则整个 Promise 被 reject，需用 catch 统一处理

示例：

const urls = ['a.jpg', 'b.jpg', 'c.jpg'];
Promise.all(urls.map(preloadImage))
  .then(images => {
    console.log('All images loaded:', images);
    // images[0] 对应 urls[0]，顺序一致
  })
  .catch(err => console.error('One or more failed:', err));

容错加载：失败时降级或重试

实际项目中网络不稳定，可增强健壮性：

立即学习“Java免费学习笔记（深入）”；

• 对单个图片 Promise 做 .catch() 后重试（如最多 2 次）
• 或改用 Promise.allSettled，无论成功失败都返回结果，便于分别处理
• 加载前检查缓存（img.complete && img.naturalWidth > 0），避免重复请求

结合实际使用：加载完成再渲染

预加载常用于轮播图、画廊等场景，确保图片就绪再展示，避免闪烁或占位符：

• 先调用 preloadImage 获取 img 元素
• 然后插入 DOM 或设置为背景，同时可读取 img.naturalWidth/Height 做适配
• 配合 CSS 过渡（如 opacity 渐显）提升体验

小技巧：加载完成的图片会自动缓存，后续 <img src="..." alt="JavaScript 中 Promise 怎么实现图片异步预加载" > 直接从内存读取，无需再次请求。