У меня есть привязка, которая меняет фоновое изображение при зависании с классом class-btn, который содержит background-image.
При зависании он имеет
a.class-btn:hover
{
background-image('path/to/image-hovered.jpg');
}
Когда страница загружается в первый раз, и вы нажимаете эту кнопку в первый раз, она мигает (для загрузки зависшего изображения требуется около половины секунды). Как избежать этого мигания без JavaScript (разрешены только простые css и html)?
Я попытался найти Qaru для аналогичного вопроса, но не повезло.
Просто добавлено:
Это происходит со всеми браузерами, и поэтому решение должно работать для всех браузеров.
Вот простой и эффективный метод предварительной загрузки CSS-кода, который я использовал несколько раз. Вы можете загрузить несколько изображений, разместив контент: url() url() url()... и т.д.
body:after{
display:none;
content: url(path/to/image-hovered.jpg) url(path/to/another-image-hovered.jpg);
}
Самый простой способ избежать этого - использовать спрайты изображений. Для хорошего обзора ознакомьтесь с этой статьей CSS трюков.
Таким образом, вы не только решаете проблему мерцания, которую видите, но также уменьшаете количество HTTP-запросов. Ваш CSS будет выглядеть примерно так:
a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; }
a.class-btn:hover { background-position: 0 -40px; }
Специфика будет зависеть от ваших изображений. Вы также можете использовать онлайн-генератор спрайтов , чтобы облегчить процесс.
Простой трюк, который я использую, состоит в том, чтобы удвоить исходное фоновое изображение, убедившись, что сначала нарисовано наведенное изображение
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
&:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
}
Отсутствие производительности и очень простая
Или, если вы еще не используете SCSS:
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
}
.next:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
Если вы это сделаете:
#the-button {
background-image: url('images/img.gif');
}
#the-button:before {
content: url('images/animated-img.gif');
width:0;
height:0;
visibility:hidden;
}
#the-button:hover {
background-image: url('images/animated-img.gif');
}
Это действительно поможет!
Смотрите здесь:
http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only
P.S - не моя работа, а решение, которое я нашел:)
Это решение, отличное от CSS: если изображения hover находятся в одном каталоге и имеют общее соглашение об именах, например, содержат подстроку "-on.", можно выбрать имена файлов и поместить их в HTML как серия:
<img src='...' style='display: none' />
@Кристианский метод применения скрытого контента: url() 'после того, как тело, похоже, не работает в Firefox 48.0 (OS X).
Однако изменение "display: none"; к чему-то вроде:
body:after {
position: absolute; overflow: hidden; left: -50000px;
content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg);
}
... помогло. Возможно, Firefox не будет загружать скрытые изображения, или, возможно, это связано с рендерингом (?).
Если они имеют одинаковые размеры, одна возможность состоит в том, чтобы нарисовать два изображения непосредственно друг над другом, с классом CSS :hover для верхнего изображения, имеющего display: none;
Таким образом, оба изображения будут предварительно загружены, но зависание сделает второе видимым.
Вы можете предварительно загрузить изображения
function preloadImages(srcs, imgs, callback) {
var img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
img = new Image();
img.onload = function() {
--remaining;
if (remaining <= 0) {
callback();
}
};
img.src = srcs[i];
imgs.push(img);
}
}
// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];
preloadImages(imageSrcs, images, myFunction);
Урок "удвоить исходное фоновое изображение" не работал у меня, поэтому я использовал еще один трюк css:
.next {
background: url(../images/next.png) center center no-repeat;
}
.next:hover {
background: url(../images/next-hover.png) center center no-repeat;
}
.next:after {
content: url(../images/next-hover.png);
display: none;
}
Этот метод хорошо работает для меня и гарантирует, что предварительно наведенное изображение не только предварительно загружено, но также готово и ожидает отображения. (Большинство других решений основаны на переключении фонового изображения при наведении, что, кажется, браузеру требуется немного времени, чтобы выяснить, как бы много ни было загружено изображение.)
Создайте псевдоэлементы: before и: after на контейнере с двумя изображениями, но скройте то, что хотите видеть при наведении курсора. Затем при наведении переключите видимость.
Пока они оба имеют одинаковый размер и правила позиционирования, вы должны увидеть аккуратный обмен.
.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; }
}
Просто измените размер фонового изображения, а не его источник! Так что...
a.class-btn {
background-image: url('path/to/image-hovered.jpg');
background-size: 0;
}
a.class-btn:hover {
background-size: auto;
}
Лучший способ сделать это - просто вставить изображения на веб-страницу и установить отображение на none.