Как менять background-image без задержки?

Question

[leni_m]

.el {
    background: url('путь/до/картинки1');
}
.el:hover {
    background: url('путь/до/картинки2');
}

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

Comments

[Ankhena]

1. Спрайт
2. Предзагрузка (варианты есть в ответах)

[leni_m]

Ankhena, а что за спрайт?

[Ankhena]

leni_m, Несколько картинок склеиваются в одну, показывается только нужная часть, при наведении, соответственно, другая. Поскольку картинка одна, то никаких задержек нет.

https://learn.javascript.ru/css-sprite

[leni_m]

Ankhena, внятненько, спасибо.

Answer 1

[Антон]

предзагрузить

var a = [
'../templates/images/house.png',
'../templates/images/banya.png',
'../templates/images/besedka.png',
'../templates/images/zabor.png',
'../templates/images/garazh.png',
'../templates/images/landscape.png'

];

var ai = [];

for(var i = 0; i < a.length; i++) {
ai[i] = new Image();
ai[i].src = a[i];
}

Answer 2

[Иван]

Подгрузите заранее, например в скрытый блок или JS'ом.