CSS: избегайте парения изображения, в первый раз мигая
У меня есть привязка, которая изменяет ее фоновое изображение при парении с классом class-btn это содержит a background-image.
При парении это имеет
a.class-btn:hover
{
background-image('path/to/image-hovered.jpg');
}
Когда страница загружается в первый раз, когда и Вы толпитесь эта кнопка в первый раз, когда она мигает (она берет о половине секунды для загрузки колебавшегося изображения). Как избежать, что мигание без JavaScript (только простая CSS и HTML позволяются)?
Я пытался искать Переполнение стека подобный вопрос, но без удачи.
Просто добавленный:
- Я должен "предварительно загрузить" колебавшееся изображение? Как?
- Я должен играть с z-индексом или непрозрачностью?
Это происходит со всеми браузерами, и таким образом решение должно работать на все браузеры.
1 ответ
Эта техника работает приятно на меня и удостоверяется не, только предварительно загруженное изображение при наведении курсора, но и это также готово и ожидает, чтобы быть отображенным. (Большинство других решений полагается на переключение фонового изображения на парении, которое просто, кажется, берет браузер немного времени для выяснения, однако очень изображение предварительно загружено.)
Создайте: прежде и: после псевдо элементов на контейнере с двумя изображениями, но скрывают то, которое Вы хотите видеть на парении. Затем на парении переключите видимость.
, Пока они оба совместно используют тот же размер и располагающие правила, необходимо видеть аккуратную подкачку.
.image-container {
&:before { display: block; background-image: url(uncovered.png); }
&:after { display: none; background-image: url(uncovered.png); }
}
.image-container:hover {
&:before { display: none; }
&:after { display: block; }
}