JavaScript 中 Promise 怎么实现图片异步预加载-js教程-PHP中文网

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

javascript 中 promise 怎么实现图片异步预加载

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调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

传入图片 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));