@uroot

Как дождаться загрузки всех картинок в React?

Есть очень много маленьких картинок, их порядка 6к но все они по пару Кб. Ссылки на эти картинки хранятся в массиве. Как мне дождаться загрузки всех этих картинок в React?

Я пробую так:

App.js
useEffect(() => {
    cacheImages()
      .catch(console.log)
      .finally(() =>isLoading(false));
  }, []);

Cам cacheImages:
const cacheImages = async () => {
  const promises = await srcArray.map(src => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = resolve;
      img.onerror = reject;
      img.src = src;
      window[src] = img;
    });
  });

  await Promise.all(promises);
};

Но в итоге проект не может до конца загрузиться и просто подвиает. Есть идеи или как это пофиксить, или как просто дождаться загрузки картинок?
  • Вопрос задан
  • 1096 просмотров
Пригласить эксперта
Ответы на вопрос 1
Hecc
@Hecc
Frontend. Дизайн. Шрифт.
Делать 6к запросов с клиента, для загрузки чего либо — это не ок. Тут самая основная проблема, это именно кол-во запросов.
Может есть смысл собрать все картинки в какой-то спрайт тем же вебпаком?
Если не хочется все 6к в один спрайт — можно придумать какую-то логику, собирать его как-то по компонентам или просто по количеству, условно в 1 спрайте по 500 картинок.
Количество запросов тогда сократиться до количества спрайтов и такой проблемы с загрузкой точно не будет.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы