#css #css-animations
#css #css-анимации
Вопрос:
Я пытаюсь изменить фоновое изображение элемента при наведении курсора мыши, и в 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 выдает мерцание при первом наведении независимо от предварительной загрузки или нет. Я знаю о спрайтах изображений, но в моем случае это невозможно.
Комментарии:
1. можете ли вы создать демо-скрипку
2. пожалуйста, создайте фрагмент вашего рабочего кода. Спасибо
3. Я не знаю, мог ли бы я побеспокоиться о предварительном рендеринге изображения, если бы вы заранее сказали мне, что пространство, в котором я должен это сделать, равно 0 x 0 пикселям.
4. Да, вы правы 04FS. Современные браузеры, вероятно, принимают слишком много «умных решений» для такого простого трюка с предварительной загрузкой, как этот. После всего этого я собираюсь создать спрайт изображения, независимо от моего последнего утверждения в исходном сообщении.
Ответ №1:
Даже если он уже загружен с сервера, если наблюдается некоторая дополнительная задержка, я бы вместо этого поместил оба изображения (сложенные или расположенные рядом) в одно изображение, известное как таблица спрайтов.
Затем при наведении переместите положение фона, чтобы показать другую половину изображения.
Например, если каждое изображение размером 50×50, вы могли бы создать одно изображение размером 100×50, расположив оба изображения рядом. Пусть в обычном состоянии отображается только левая половина (сохраняя ширину элемента равной 50 и положение фона 0 0), а затем сдвиньте фон на 50 пикселей влево при наведении, чтобы показать правую половину:
background-position: -50px 0;
Комментарии:
1. Согласен, использование подобной техники «раздвижных дверей» было бы проще, меньше кода, работало бы везде и меньше HTTP-запросов к изображениям
2. Причина, по которой я не хотел использовать спрайт изображения, заключается в том, что я планировал добавить фоновый переход позже. И это выглядит действительно странно, если вы делаете это со спрайтом изображения. Но я нашел способ сделать это независимо (в этой статье): gordonlesti.com/css-background-transitions-with-image-sprites