Как решить баг с подгрузкой картинок?

Question

[Combat7]

Есть картинка. По наведению на нее, через css ставится другая картинка.
проблема в том, что при загрузке сайта, эта картинка не подгружается, подгружается только по ховеру, и в итоге баг на 1-3 секунды
Спрайт использовать не удобно, как быть в этой ситуации?
Может библиотека какая есть для этого

Answer 1

[Stalker_RED]

Предварительно загружать картинку в скрытый элемент, например.

Answer 2

[Danila]

попробуй использовать prefetch

Answer 3

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

https://css-tricks.com/snippets/jquery/image-preloader/

Answer 4

[Евгений]

img src - основное изображение
div background - вторичное

div:hover img {
opacity: 0;
}
div img {
width: 200px;
height: 200px;
}

<div style="background: url(#) no-repeat center center">
<img src="#">
</div>

Comments

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

Извращение %)))

Answer 5

[Андрей Токмаков]

codepen.io/anon/pen/yMxLzm

Comments

[Андрей Токмаков]

width: 0; можно заменить на margin-left: -100px;

[Combat7]

Тут же как бы css цвета, а дело идет о изображениях подгружаемых

[Андрей Токмаков]

Combat7: Ну я просто дивы цветные использовал вместо картинок, что бы не искать картинки