在React中预加载图像的最有效方法是什么？值得付出努力吗？

Question

我有一个网站，可以使用户相当线性地向前移动。每次用户向前移动时，都会加载更多图像。将图像加载到适当位置似乎需要大约一两秒钟的时间。

因此，我开始考虑是否可以加载在页面更改之前将下次加载的图像。

最有效的方法是什么？这是常见的做法吗？值得努力吗？

我试图传递preLoadedImages属性，然后运行以下代码段：

  componentDidMount() {
    if(this.props.preLoadImages){
      Object.values(this.props.preLoadImages).forEach((image) => {
        const img = new Image();
        img.src = image.fileName;
      });
    }
  }

当前，直到进入下一页面，我才能在网络标签中看到加载的图像。