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

Question

[uRoot]

Есть очень много маленьких картинок, их порядка 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);
};

Но в итоге проект не может до конца загрузиться и просто подвиает. Есть идеи или как это пофиксить, или как просто дождаться загрузки картинок?

Comments

[Максим Анциферов]

Подвисает в каком плане, браузер зависает или просто не скачиваются картинки? Попробуйте уменьшить количество картинок до пары сотен/тысяч, чтобы проверить в какой момент они перестают загружаться. Еще можно попробовать грузить картинки батчами, чтобы не открывать сразу 6к подключений

[uRoot]

Максим Анциферов, ну получается проект открылся, но крутится спиннер у вкладки в браузере. Если подождать - то может загрузиться, если не повезёт - то просто вкладка зависнет.

Я пробовал уменьшать кол-во картинок - всё ок. В районе 1к картинок всё отрабатывает как и положенно.

Еще можно попробовать грузить картинки батчами

Это как?

Сейчас получается так, что скрипт у вебпака пробегает по папке assets и парсит все картинки, записывая их пути в файл. А из файла уже циклом (код в шапке). Было бы круто повыдирать картинки только из подключённых компонентов. Но там они и в теге img, и просто в scss...

А Suspense в React мне как-то может помочь с этим?

[Максим Анциферов]

Можно попробовать вот так

const BATCH_SIZE = 1000;
const cacheImages = async () => {
  const batches = await lodash.chunk(srcArray, BATCH_SIZE);

  for (const batch of batches) {
    const promises = batch.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);
  }
};

Answer 1

[Андрей Hecc]

Делать 6к запросов с клиента, для загрузки чего либо — это не ок. Тут самая основная проблема, это именно кол-во запросов.
Может есть смысл собрать все картинки в какой-то спрайт тем же вебпаком?
Если не хочется все 6к в один спрайт — можно придумать какую-то логику, собирать его как-то по компонентам или просто по количеству, условно в 1 спрайте по 500 картинок.
Количество запросов тогда сократиться до количества спрайтов и такой проблемы с загрузкой точно не будет.

Comments

[uRoot]

Спасибо. А есть ещё какие-то идеи? Просто почему так много мелких картинок, потому что они используются как анимация. Т.е. быстро в цикле перебираются картинки и в результате юзер видит анимацию, хотя то просто картинки сменяют друг друга.

[Андрей Hecc]

uRoot, Так спрайты изначально для анимации были и придуманы. Пару лет назад вообще была очень популярная штука, в спрайты упаковывали весь UI сайтов и приложений и этим заменяли сотни мелких запросов одним большим.
А потом они осталось как очень нишевый инструмент.
Тем не менее есть большое количество реализаций начиная от простых на чистом css, заканчивая более сложными с обертками в виде JS библиотек. Это легко гуглиться.

Пример спрайта и его использование:

[uRoot]

Андрей Hecc, да-а, нужно над этим подумать. Спасибо