Изображения не загружаются если их слишком много?

Question

[Михаил]

Пытаюсь сделать выбор изображения загружая с помощью php скрипта кнопки внутри которых img

В общем их 1500+

$directory = $_SERVER['DOCUMENT_ROOT']."/minecraft_assets";
$images = glob($directory . "/*.png");
                                
foreach($images as $image)
{
    $image_parsed = str_replace($_SERVER['DOCUMENT_ROOT'], "", $image);
    echo "<button type=\"button\" id=\"$image_parsed\" onclick=\"SelectIconName('$image_parsed')\" class=\"w-8 h-8 border-2 border-white/[0.1] hover:border-blue-400/[0.9]\"><img onerror=\"error_load()\" class=\"w-full h-full edge\" src=\"".$image_parsed."\"><button/>";
}

Но при первой загрузке страницы загрузке страницы пользователь получает не полный набор изображений (после повторной иногда полный)



Как это решить и/или оптимизировать?

Comments

[pddev]

Сколько памяти и открытых вкладок (и других помимо браузера приложений) на тестовой машине - проверяли?
В head вебстраницы можно добавлять инструкции о предзагрузке изображений.

[Вадим]

Как это решить и/или оптимизировать

Свести к одной картинке. Или категоризировать картинки и свести количество картинок к количеству категорий
https://ru.wikipedia.org/wiki/%D0%A1%D0%BF%D1%80%D...

https://habr.com/ru/articles/159027/
https://telegra.ph/Stack--sprajt-zdorovogo-chelove...
https://siteok.org/blog/html/svg-sprajty

[pddev]

Блин, а я, глядя на скриншот вебстраницы, подумал, что это как раз сведённые в одно изображение иконки-спрайты... :))) И что проблема немножко в другом.
Не думал, что всё настолько плохо. Естественно, от такого количества ресурсов браузеру поплохело.

[Aetae]

На самом деле никому не должно "плохеть" независимо от того, сколько бы ни было накидано картинок или чего-бы то ни было ещё.
Да, так делать не стоит, нет, оно всё равно должно работать.

Скорее всего стоит какое-то ограничение на сервере для слишком частых и многочисленных запросов, стоит разобраться с его настройкой, даже если решите заменить всё спрайтом.

Answer 1

[d'Ivan]

Гугли: CSS sprites