是否可以在图像将呈现的 React 组件之外预加载图像？

Question

我建立了一个有加载页面的系统。在此加载页面中，我可以调用此函数：

export const preloadImage = ( name, width, height ) => {
  return new Promise(resolve => {
    const img = new Image();
    img.src = `MY DYNAMIC IMAGE URL (private)`;
    img.onload = () => {
      store.dispatch(addSavedimage([name, img.src])); //addSavedImage is a redux action
      resolve();
    };
  });
};

所以这个函数的作用是在 new Image() 中加载我的图像。然后等待图像加载完毕。通常情况下，如果我在图像所在的组件内执行此操作，则图像标签 src 在加载时会成为预加载的图像 src，但因为这里不是这种情况，所以我将预加载的图像 src 提供给 Redux。当我想使用这个预加载的图像时，我只需从 Redux 存储中检索它，然后它就会再次下载图像。

所以我的问题是，如何在图像组件之外预加载图像？

Answer 1

似乎正在发生的事情是，当 promise 得到解决时，缓存的图像被逐出，因为图像元素超出范围（并被垃圾收集）。您可以通过将图像发送到商店来将其保留在范围内。导航到下一个组件后，您可以直接从中设置图像 src。

export const preloadImage = ( name, width, height ) => {
  return new Promise(resolve => {
    const img = new Image();
    img.src = `MY DYNAMIC IMAGE URL (private)`;
    img.onload = () => {
      store.dispatch(addSavedimage([name, img])); // <-- dispatch img element itself
      resolve();
    };
  });
};

注意：使用此方法，每个源图像将存在两个图像元素。为了节省内存，考虑在将所有 src 添加到 DOM 后清除图像存储。

是否可以在图像将呈现的 React 组件之外预加载图像？

Is it possible to preload image outside of the React component the image will render in?

javascript

preload

ecmascript-6

reactjs

redux