Блог

Я пытаюсь поменять изображение с помощью CSS, но когда мышь переворачивается в первый раз, вместо замены одного изображения другим, я сначала получаю мерцание. Вот мой код CSS:

 #UL {
    width: 50px;
    height: 54px;
    background:url("/img/UL_gr.png") no-repeat;     
}
#UL:hover {
    background-image:url("/i/logos/UL.png");        
}
  

Предварительно загрузите свои изображения и используйте спрайты. Проблема решена!

Возможно, мерцание связано с тем, что браузер пытается загрузить новое изображение (UL.png?)

Просто чтобы убедиться, попробуйте добавить элемент img с «/i/ logos/UL.png» в качестве src и display: none в качестве встроенного стиля. Добавьте это где-нибудь на своей странице и посмотрите, поможет ли это.

Мерцание вызвано тем, что изображение еще не загружено, его следует предварительно загрузить. Существует несколько способов сделать это, ниже приведен один из методов. Он не отображается на странице, но, поскольку он находится в теле, он все равно загрузит изображение. Поместите это ниже всего вашего другого контента, чтобы это не замедляло загрузку чего-либо еще.

 <div style="display:none;">
   <img src="/i/logos/UL.png" >
</div>
  

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