Блог

Я пытаюсь изменить фоновое изображение элемента при наведении курсора мыши, и в Chrome все работает отлично. Но в Firefox он всегда мигает на долю секунды при самом первом наведении после загрузки страницы.

Я уже предварительно загрузил изображения, которые необходимы в body:after , и консоль разработчика в Firefox показывает, что для рассматриваемого файла есть запрос «GET». Тем не менее, кажется, что он не готов к рендерингу при первом наведении курсора мыши.

Вот как я предварительно загружаю изображение.

 body:after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url(image.png);
}
  

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

Даже если он уже загружен с сервера, если наблюдается некоторая дополнительная задержка, я бы вместо этого поместил оба изображения (сложенные или расположенные рядом) в одно изображение, известное как таблица спрайтов.

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

Например, если каждое изображение размером 50×50, вы могли бы создать одно изображение размером 100×50, расположив оба изображения рядом. Пусть в обычном состоянии отображается только левая половина (сохраняя ширину элемента равной 50 и положение фона 0 0), а затем сдвиньте фон на 50 пикселей влево при наведении, чтобы показать правую половину:

 background-position: -50px 0;