Как загрузить иконку которая будет загружаться лишь при ховере?

Question

[DeniSidorenko]

Добрый день, есть иконка в svg в разных цветах, черный и белый при ховере. Таким образом при ховере загружается новая иконка. Даже учитывая что SVG весит очень мало, когда пользователь первый раз загрузил страницу и наводит, то иконка подгружается лишь тогда, таким образом, видно немного пустое пространство. Как можно загрузить иконку при загрузке все страницы, с учетом того что она используется лишь при ховере?

Comments

[WapSter]

Если иконка прописана в css или html, она и так подгружается вместе со всей страницей, независимо при ховере или нет.

[DeniSidorenko]

Тимур Турсунбаев, Если они прописана в css она подгружается лишь при ховере.

[Rustam Bainazarov]

Тимур Турсунбаев, только если элемент показан, т. е. файл картинки из правила с :hover будет грузится только когда сработает этот :hover. Не раньше.

Иными словами, браузер не грузит файлы, указанные в CSS до тех пор, если этого элемента нет на странице или он не скрыт в display: none, :hover, :active и т. п.

[Rustam Bainazarov]

DeniSidorenko, попробуйте хак на :root:before для предзагрузки:
https://mobile.htmlgoodies.com/tutorials/web_graph...

Я проверил, действительно грузит сразу ресурсы, если их указать так. Либо же там есть хак для body и множественные файлы background-image, которые затем визуально скрываются. Что можно тоже использовать, ибо это тоже работает.

Answer 1

[Robur]

вот тут основные способы: https://perishablepress.com/3-ways-preload-images-...