Мигающий флажок [дубликат]

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

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 :hover для верхнего изображения, имеющего display: none;

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

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

#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

PS - не моя работа, а решение, которое я нашел:)

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

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

@ Метод использования скрытого контента: url () после использования тела Kristian, похоже, не работает в 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, которую я использовал несколько раз. Вы можете загрузить несколько изображений, разместив контент: url () url () url () ... и т. Д.

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

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

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

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

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

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

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