是否可以在将渲染图像的 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

似乎正在发生的事情是，当承诺解决时，当图像元素超出范围（并被垃圾收集）时，缓存的图像被逐出。您可以通过将图像分派到商店来保持图像在范围内。导航到下一个组件后，您可以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();

    };

  });

};

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