Подтвердить что ты не робот

Css: избегайте мгновенного смазывания изображения

У меня есть привязка, которая меняет фоновое изображение при зависании с классом class-btn, который содержит background-image.

При зависании он имеет

a.class-btn:hover
{
    background-image('path/to/image-hovered.jpg');
}

Когда страница загружается в первый раз, и вы нажимаете эту кнопку в первый раз, она мигает (для загрузки зависшего изображения требуется около половины секунды). Как избежать этого мигания без JavaScript (разрешены только простые css и html)?

Я попытался найти Qaru для аналогичного вопроса, но не повезло.

Просто добавлено:

  • Должен ли я "предварительно загрузить" наведенное изображение? Как?
  • Должен ли я играть с z-индексом или непрозрачностью?

Это происходит со всеми браузерами, и поэтому решение должно работать для всех браузеров.

4b9b3361

ОТВЕТЫ

Ответ 1

Вот простой и эффективный метод предварительной загрузки CSS-кода, который я использовал несколько раз. Вы можете загрузить несколько изображений, разместив контент: url() url() url()... и т.д.

body:after{
 display:none;
 content: url(path/to/image-hovered.jpg) url(path/to/another-image-hovered.jpg);
}

Ответ 2

Самый простой способ избежать этого - использовать спрайты изображений. Для хорошего обзора ознакомьтесь с этой статьей CSS трюков.

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

a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; }
a.class-btn:hover { background-position: 0 -40px; }

Специфика будет зависеть от ваших изображений. Вы также можете использовать онлайн-генератор спрайтов , чтобы облегчить процесс.

Ответ 3

Простой трюк, который я использую, состоит в том, чтобы удвоить исходное фоновое изображение, убедившись, что сначала нарисовано наведенное изображение

.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;
 }

Ответ 4

Если вы это сделаете:

#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 - не моя работа, а решение, которое я нашел:)

Ответ 5

Это решение, отличное от CSS: если изображения hover находятся в одном каталоге и имеют общее соглашение об именах, например, содержат подстроку "-on.", можно выбрать имена файлов и поместить их в HTML как серия:

<img src='...' style='display: none' />

Ответ 6

@Кристианский метод применения скрытого контента: 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 не будет загружать скрытые изображения, или, возможно, это связано с рендерингом (?).

Ответ 7

Если они имеют одинаковые размеры, одна возможность состоит в том, чтобы нарисовать два изображения непосредственно друг над другом, с классом CSS :hover для верхнего изображения, имеющего display: none;

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

Ответ 8

Вы можете предварительно загрузить изображения

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);

Ответ 9

Урок "удвоить исходное фоновое изображение" не работал у меня, поэтому я использовал еще один трюк 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;
}

Ответ 10

Этот метод хорошо работает для меня и гарантирует, что предварительно наведенное изображение не только предварительно загружено, но также готово и ожидает отображения. (Большинство других решений основаны на переключении фонового изображения при наведении, что, кажется, браузеру требуется немного времени, чтобы выяснить, как бы много ни было загружено изображение.)

Создайте псевдоэлементы: 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; }
}

Ответ 11

Просто измените размер фонового изображения, а не его источник! Так что...

a.class-btn {
    background-image: url('path/to/image-hovered.jpg');
    background-size: 0;
}
a.class-btn:hover {
    background-size: auto;
}

Ответ 12

Лучший способ сделать это - просто вставить изображения на веб-страницу и установить отображение на none.