Как создать очередь показа изображений?

Question

[Илья]

Надо получать url на картинку с бекэнда по вебсокету и потом показать это на странице в течении 10 секунд. Картинки могут прилететь пачкой штук 10 за пару секунд, надо их поставить в очередь на показ.
Как организовать очередь с реактом? Желательно чистым.

Answer 1

[Максим]

Очередь с реактом ничем не отличается от "очереди с чем угодно". Можете использовать requestAnimationFrame (EN, на русском тоже есть в гугле) + "как контролировать fps", или setInterval / setTimeout.

Реакт тут вообще не причем, когда напишите код для показа без него, добавьте этот код в код компонента и все.
---
Алгортим примерно следующий:
1) загружаете список url
2) по нему начинаете загружать картинки (стандартно, с помощьюconst img = new Image + img.onload = ... )
3) эти картинки складываете в очередь (в массив)
4) начинаете показывать

Показ вы начинаете либо в случае загрузки первого кадра и далее по ходу загрузки остальных, либо после загрузки всех - это уж как вам угодно.