Как принудительно заставить загружаться элемент на странице в самую первую очередь?

Question

[AntohaRomaha]

Всем салют.
Есть сайт, довольно тяжелый.
Есть лоадер анимированный, с картинкой. Пока не загрузится страница - показывается лоадер.
Лоадер самый первый в body прописан. Картинка на него 40кб весит. Так вот при тесте на совсем медленных соединениях - подгружаются другие картинки, а картинка лоадера еще нет...
То есть - надо чтобы Самым Первым подгружалась картинка в лоадер. Сам лоадер (хтмл его и стили) - грузится и отображается сразу.
Спасибо.

Answer 1

[dmz9]

base64-кодирование картинки в инлайн, но размер вырастет.
картинка станет неотъемлемой частью исходного кода страницы, однако увеличит его на 55-60 кб.
я бы рассмотрел вариант приведения к цсс-анимации, это будет легче по объему.

Comments

[AntohaRomaha]

Сайт в сумме под 5 метров оптимизорованный вешает... огромная туча графики анимации и скриптов.... так что плюс 50 кб - это в моем случае - не старшно.

[AntohaRomaha]

Да, картинка загружается сразу. Спасибо.

Answer 2

[whoisthere]

Попробуйте вашу картинку загрузить через тег LINK в HEAD.

<link rel="prefetch prerender" href="loader.png" />

Или прям деревянный способ. Добавьте STYLE в HEAD.

<style>.loader {background: url(loader.png);}</style>

Comments

[AntohaRomaha]

Оба способа не прокатили:( видно в гугл-тулзах, что первыми вообще грузятся картинки где то с низу страницы.. блин это вообще некорректно... :(((