Можно ли предварительно загрузить изображение за пределами компонента реакции, в котором будет отображаться изображение? - PullRequest
Новая
       22

Можно ли предварительно загрузить изображение за пределами компонента реакции, в котором будет отображаться изображение?

0 голосов
/ 14 июня 2019

Я построил систему, где у меня есть страница загрузки.На этой странице загрузки я могу вызвать эту функцию: 

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 для редукции.Когда я хочу использовать это предварительно загруженное изображение, я просто извлекаю его из магазина приставок, но затем оно просто снова загружает изображение.

Итак, мой вопрос: как мне предварительно загрузить свое изображение вне компонента изображения?

Спасибо,

Рик

1 Ответ

1 голос
/ 14 июня 2019

Кажется, что происходит то, что кэшированное изображение высвобождается, когда элемент изображения выходит из области видимости (и получает мусор), когда обещание разрешено. Вы можете сохранить изображение в поле, отправив его в магазин. После перехода к следующему компоненту вы можете установить изображение 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 s были добавлены в DOM.

...