Как загрузить img в первой очереди при загрузке страницы?

Question

[Alex]

Есть экран загрузки приложения где присутствует прогресс бар, и чуть выше логотип приложения в виде тега img, однако проблема в том, что логотип хоть и сильно сжатый и маленький (2КБ webp) он появляется только в конце загрузки.
Существуют ли какие то методы при помощи html разметки или JS скрипта подгрузить изображение в первой очереди при загрузке? Т.е. указать браузеру что это изображение нужно загрузить в первую очередь, а потом всё остальное.

Comments

[Ivan Ustûžanin]

если он реально маленький, что мешает его как data-ссылку запихнуть?

ПЛЮС: а вообще нужно смотреть как подключается js, может могут атрибуты defer или async для script

[Alex]

Ivan Ustûžanin, не совсем понял про data. Это уже готовый тег в html в верхней части body, зачем ему data? Или вы думаете если динамически ему на старте менять src из пустого на нужный будет грузится быстрее чем простой тег img?

[Ivan Ustûžanin]

Alex, data-ссылка это ссылка вида data:mime/type,url-encoded-content или data:mime/type;base64,base64-encoded-content — т.е. я предлагаю попробовать заменить src в img на data-ссылку
а если перед этим тегом img есть тяжёлый script с src, то может помочь добавление атрибутов defer или async в этот script

[leeroyjenkins176]

еще можно так сделать

<link rel="preload" as="image" href="important.png">

[Alex]

Ivan Ustûžanin, ааа вы про base64, а я подумал про js подмену src из data ))

Answer 1

[Олег]

В img src как data: