Как решить проблему подгрузки изображений, установленных как background-image?

Question

[wbrapist]

Здравствуйте.

Есть панель. При наведении на элемент панели подставляется другое изображение. Изображения устанавливаются блоку с помощью background-свойства.
При срабатывании hover видно задержку в смене изображения. Как я понял, можно применить спрайты, а что еще помимо них можно использовать?

Comments

[twobomb]

Не должно быть задержки, изображение второе подружается при открытии сайта, а не при наведении. Желательно бы код глянуть.

[wbrapist]

twobomb: странно, панель слева интересует.
https://wbrapist.000webhostapp.com/

Answer 1

[twobomb]

Мне кажется лучше всего эти изображения переделать на svg. Еще вариант что если второй вариант изображения не подгружать, а изменять существующее фильтром?

Comments

[wbrapist]

Да, как вариант. На счёт подгрузки изображений. Почему идёт задержка, вы сказали, что изображения подгружаются сразу при открытии сайта, или вы думали, что я использовал спрайт?

[twobomb]

wbrapist: Оно их подружает не при загрузке, а при первом наведении походу. После этого кеширует и при следующем наведении мгновенно отображает.

[twobomb]

wbrapist: И еще я сразу не обратил внимания, ну у вас офигенно здорового разрешения изображения. Такого не должно быть, уменьшите их раз в 5, и желательно еще сожмите их через какой нибудь сервис. Чем меньше будут они весить тем быстрее будет грузиться сайт, а с этими изображениями он будет жутко тормозить на слабых машинах или средней скорости интернет.

[wbrapist]

twobomb: да, то что они подгружаются при первом наведении - больше похоже.
На счёт изображений - cейчас сделаю. А сжимаю через FileOptimizer

Answer 2

[Иван]

Еще можно подставить закодированные в base64 изображения (inline-background) - оба изображения в этом случае подгрузятся одновременно с CSS файлом и задержки не будет. Но изображения должны быть небольшими, т.к. именно на их размер увеличится размер CSS файла.