Как исправить моргание иконок при ховере?

Question

[Лучник *range attack +10*]

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

Answer 1

[Сергей Горячев]

Казалось бы, выход — использовать спрайты, но тут не получится их использовать.

И в чем проблема? Это реально хороший способ.
Можно, конечно, на jquery сделать image preloader, но спрайты лучше.

Comments

[Лучник *range attack +10*]

Думал что не вариант, так как нужен был разный масштаб картинок, не хотелось дублировать картинку, тем более svg (который можно во сколько раз угодно увеличивать/уменьшать) в разных размерах в спрайте. Но оказалось, что можно сделать масштабируемые svg спрайты.

Answer 2

[Briss]

Используйте svg иконки в шрифтах.
fontawesome.io
При желании можно написать таск для сборщика (gulp,grung,webpack), чтобы он ваши иконки добавлял в шрифт.

Comments

[Лучник *range attack +10*]

От него как раз и избавляемся, есть у него свои недостатки.