2

Есть у меня 2 блока, которые по ховеру меняют картинку. При загрузке страницы и наведении на них смена происходит дергано и резко, пока картинки не сохранятся в браузер и дальше и благодаря свойству transition меняются плавно.

Как избавиться от дерганности смены картинок?

#plasch1,
#plasch2 {
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#plasch1 {
  background: url(http://s019.radikal.ru/i625/1510/c8/9aacc300c120.png) no-repeat 0 0;
}
#plasch2 {
  background: url(http://s020.radikal.ru/i720/1510/02/bcd3fcaf61d5.png) no-repeat 0 0;
}
#plasch1:hover {
  background: url(http://s019.radikal.ru/i602/1510/96/342189e0bff2.png) no-repeat 0 0;
}
#plasch2:hover {
  background: url(http://s017.radikal.ru/i422/1510/a9/1cd5dc8beec1.png) no-repeat 0 0;
}
<div class="plasch-items">
  <ul>
    <li>
      <div id="plasch1"></div>
    </li>
    <li>
      <div id="plasch2"></div>
    </li>
  </ul>
</div>

2
  • 1
    спрайтом сделайте обе картинки. или предварительно подгружайте вторую. 5 окт 2015 в 9:08
  • @Alexander Igorevich "или предварительно подгружайте вторую" а это как сделать? скриптом?
    – Вася
    5 окт 2015 в 9:11

2 ответа 2

5

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

1) Использовать технику sprite для изображения. Объединение многих изображений в одно. Почитать подробнее

2) Подгружать скрытые изображения при загрузке страницы.

Способ "в лоб":

<img src="http://s019.radikal.ru/i602/1510/96/342189e0bff2.png" style="display:none;">
<img src="http://s017.radikal.ru/i422/1510/a9/1cd5dc8beec1.png" style="display:none;">

Способ более хороший:

var images = new Array()
function preload() {
    for (i = 0; i < preload.arguments.length; i++) {
        images[i] = new Image()
        images[i].src = preload.arguments[i]
    }
}
preload(
    "http://s019.radikal.ru/i602/1510/96/342189e0bff2.png",
    "http://s017.radikal.ru/i422/1510/a9/1cd5dc8beec1.png"
)

3) и еще одно:

создать блок 1x1 пиксель. в него через запятую прописать все фоны, которые вам нужны.

<div class="preload"></div>

.preload {
    width:1px;
    height:1px;
    background-image:
        url(http://s019.radikal.ru/i602/1510/96/342189e0bff2.png),
        url(http://s017.radikal.ru/i422/1510/a9/1cd5dc8beec1.png);
    background-repeat:none;
    background-position:-1000px -1000px;
    position:absolute;
    opacity:0;
}
7
  • прикол в том, что например сервис csssprites.com создает спрайт со всеми изображения в столбик и пака браузер доберется скажем до 2000 позиции все пролистывание отображается на экране..
    – Вася
    5 окт 2015 в 9:43
  • значит для вас другие способы.
    – xaja
    5 окт 2015 в 9:48
  • 2
    @Вася при использовании техники sprite отключайте анимацию на background-position
    – korytoff
    5 окт 2015 в 9:48
  • @korytoff т.е. теперь используя спрайты я не могу более гибко управлять анимацией transition transform и т.п. ?
    – Вася
    5 окт 2015 в 10:07
  • 2
    @Вася можно. Используйте разные элементы для спрайта и анимации и вложите один в другой как например + я уже написал про отключение анимации для background-position. Прописывайте анимацию только для тех свойств, которые вам нужны
    – korytoff
    5 окт 2015 в 10:18
1

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

  body:after {
    content:
        url(http://s019.radikal.ru/i625/1510/c8/9aacc300c120.png)
        url(http://s020.radikal.ru/i720/1510/02/bcd3fcaf61d5.png)
        url(http://s019.radikal.ru/i602/1510/96/342189e0bff2.png)
        url(http://s017.radikal.ru/i422/1510/a9/1cd5dc8beec1.png);
    display: none;
  }

Не уверен, насчет всех браузеров, но в Chrome это точно работает.

UPD: В Firefox тоже работает.

body:after {
  content:
      url(http://s019.radikal.ru/i625/1510/c8/9aacc300c120.png)
      url(http://s020.radikal.ru/i720/1510/02/bcd3fcaf61d5.png)
      url(http://s019.radikal.ru/i602/1510/96/342189e0bff2.png)
      url(http://s017.radikal.ru/i422/1510/a9/1cd5dc8beec1.png);
  display: none;
}

#plasch1,
#plasch2 {
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#plasch1 {
  background: url(http://s019.radikal.ru/i625/1510/c8/9aacc300c120.png) no-repeat 0 0;
}
#plasch2 {
  background: url(http://s020.radikal.ru/i720/1510/02/bcd3fcaf61d5.png) no-repeat 0 0;
}
#plasch1:hover {
  background: url(http://s019.radikal.ru/i602/1510/96/342189e0bff2.png) no-repeat 0 0;
}
#plasch2:hover {
  background: url(http://s017.radikal.ru/i422/1510/a9/1cd5dc8beec1.png) no-repeat 0 0;
}
<div class="plasch-items">
  <ul>
    <li>
      <div id="plasch1"></div>
    </li>
    <li>
      <div id="plasch2"></div>
    </li>
  </ul>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.