Почему скрытые элементы подгружаются в момент их появления, а не в момент загрузки сайта?

Question

[ArtJH]

На моем сайте есть много картинок у которых задан display:none. И когда я задаю им display block, они появляются с задержкой(видимо загружаются). Никаких transition нет, дело в загрузке.
Вот как сделать так чтоб они загружались при загрузке всего сайта, а не в момент появления?

Answer 1

[Robur]

потому что браузер экономит трафик и время и не грузит то что он все равно не будет показывать.
Можно принудительно загрузить эти картинки через JS - гуглите "js image preload".
либо скрыть блоки другим способом кроме display:none, с которым браузер их загрузит заранее.
так же может помочь

<link rel="preload" href="урлнакартинкутут" as="image">

, но это не точно

Comments

[ArtJH]

А если скрывать как opacity: 0, будет сразу загружаться или так же?

[Robur]

ArtJH, думаю что сразу, но вам ничего не мешает проверить ;)

Answer 2

[Александр Епихин]

Вам нужно сделать предзагрузку изображений с помощью javascript. SO

Comments

[Александр Епихин]

Раз уж пошел разговор про предзагрузку изображений, то предварительная загрузка != быстрое отображение. Изображение должно еще отрисоваться. Отрисовка изображения происходит построчно сверху вниз. Даже если изображение было загружено ранее все равно потребуется время на его отрисовку. На изображениях с небольшим разрешением отрисовка будет не видна, будет происходить очень быстро. А вот если изображение большое, то возможно поймать мелькание. Чтобы этого избежать/уменьшить время мелькания необходимо изображение предварительно отрисовать в canvas. А canvas спрятать, например через visually-hidden