Мигание загружаемых картинок

[Нектос...]

Доброго времени суток!

Столкнулся с проблемой мигания картинок.

Суть в том, что у меня стоит инпут кнопки с селектором background:url(button1.png); и с селектором:hover background:url(button2.png);. Всё это установлено вместе с transition:all 0.3s ease;. Т.е. по сути кнопка медленно меняет свой внешний вид с button1.png на button2.png.

Но проблема в том, что при наведении, перед тем как поменять внешний вид, картинка мигает (т.е. однократно исчезает на долю секунды и затем появляется button2.png, проигрываясь transition'ом).

Никто не сталкивался с подобной проблемой? А то уж больно сильно напрягает это мигание. Думал может загрузчик подключить и проблема решиться, посоветовали QueryLoader v2 — подключил его, но проблема не решилась...

Как быть?

[npofopr]

Попробовать вместо css использовать jquery.

[Нектос...]

Попробовать вместо css использовать jquery.

Нашел решение через КСС:

html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

[frendlix]

Ну вообще правильнее было бы не так сделать.

Объединяем бэкграунд 1 и 2 в один спрайт, к примеру получился размер 100 на 50 пикселей. 50 на 50 - один бэк, 50 на 50 другой.

Потом задать для бэкгрануда без hover position 0px 0px а для бэкгрануда с hover задать, 0px -50px;

В итоге бэк подгружается сразу одной картинкой, и мигания не будет, код выглядит примерно так:

Без наведения:

.fruit4 {
    padding: 0px;
    float: left;
    width: 230px;
    height: 230px;
    background: url("../img/fruit4.png") no-repeat scroll 0px 0px, url("../img/round.png") no-repeat scroll 0px 0px transparent;
}

При наведении:

.fruit4:hover {
    padding: 0px;
    float: left;
    width: 230px;
    height: 230px;
    background: url("../img/fruit4.png") no-repeat scroll 0px 0px, url("../img/round.png") no-repeat scroll -926px 0px transparent;
    cursor: pointer;

Как-то так...

Edited July 12, 2013 by frendlix

[mrnobody]

Так не получится — из-за transition будет плавно меняться background-position.

http://jsfiddle.net/mrnobody/BwNGT/

Edited July 12, 2013 by mrnobody

[frendlix]

Так не получится — из-за transition будет плавно меняться background-position.

http://jsfiddle.net/mrnobody/BwNGT/

И правда, про transition что то не внимательно посмотрел...

Ну как вариант: http://jsfiddle.net/m9ZWf/

Ну или и правда: html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

Edited July 12, 2013 by frendlix