react如何实现预加载图片，首页提前加载全部图片，并显示进度条。

解答思路

核心思路是：把所有需要预加载的图片地址放进一个数组，遍历数组为每个地址创建一个 Image 对象并触发加载，在每张图片的 onload 回调中把已完成计数加 1，用「已完成数量 / 总数量」计算出当前进度百分比，驱动进度条更新。

示例代码

const urls = [
  'https://www.lilnong.top/static/img/avator/avator-0.jpg',
  'https://www.lilnong.top/static/img/avator/avator-1.jpg',
  // ...更多图片地址
];

urls.forEach((v, idx, arr) => {
  const img = new Image();
  img.src = v;
  img.onload = () => {
    arr.successLength = (arr.successLength || 0) + 1;
    console.log(`进度：${arr.successLength / arr.length}`);
  };
});

详细说明

在 React 组件中使用这个思路时，一般会结合组件状态来驱动界面更新：

• 在 useEffect（或类组件的生命周期）中，遍历图片地址数组，为每个地址创建一个 new Image() 并设置其 src 触发加载。
• 每张图片加载完成（onload 触发）时，将已完成的计数器加 1，并调用 setState（或对应的状态更新函数）把「已完成数量 / 总数量」这个比例更新到组件状态中，用于渲染进度条。
• 图片地址列表可以手动维护，也可以借助构建工具（如 gulp）在构建阶段自动扫描并生成，避免手写遗漏。
• 当计数器等于总数量时，即代表全部图片加载完成，可以在此时触发「隐藏加载态」「进入首页」等后续逻辑。

需要注意的是，onload 只在加载成功时触发，如果担心个别图片加载失败导致进度卡住，实际使用中建议再监听 onerror，将失败的图片也计入已完成数量，避免进度条无法到达 100%。

小结

预加载图片进度条的实现本质上就是「用 Image.onload 统计已完成数量」，结合 React 状态更新驱动进度条 UI；生产环境中建议同时监听 onerror，避免因个别资源加载失败导致进度无法完成。