web-dev-qa-db-ja.com

css：初めての画像ホバーの点滅を避ける

class-btnを含むクラスbackground-imageでホバーすると、背景画像を変更するアンカーがあります。

ホバリングすると、

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

ページが初めて読み込まれ、このボタンを初めてホバーすると、点滅します（ホバーされた画像をダウンロードするのに約0.5秒かかります）。 JavaScriptなしでその点滅を回避するにはどうすればよいですか（単純なCSSとHTMLのみが許可されています）？

Stack Overflowで同様の質問を検索しようとしましたが、運はありませんでした。

追加したばかり：

  • ホバーされた画像を「プリロード」する必要がありますか？どうやって？
  • Zインデックスまたは不透明度で再生する必要がありますか？

これはすべてのブラウザーで発生するため、ソリューションはすべてのブラウザーで機能するはずです。

htmlcssimagehover
59
Haradzieniec

ここに、私が何度か使ったシンプルで効果的なcss画像のプリロード手法を示します。コンテンツを配置することにより、いくつかの画像を読み込むことができます：url（）url（）url（）...など。

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

これを回避する最も簡単な方法は、画像スプライトを使用することです。概要については、 このCSSトリックの記事 をご覧ください。

これにより、表示されているちらつきの問題を解決できるだけでなく、HTTPリクエストの数を減らすことができます。 CSSは次のようになります。

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

詳細は画像によって異なります。オンライン スプライトジェネレーター を使用して、プロセスを簡単にすることもできます。

59
CherryFlavourPez

私が使用する簡単なトリックは、元の背景画像を2倍にして、ホバーされた画像を最初に置くことです

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

これを行う場合：

#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-私の仕事ではなく、私が見つけた解決策:)

8
Benjamin Dordoigne

これは非CSSソリューションです：ホバー画像が1つのディレクトリにあり、サブストリング「-on」を含むなどの一般的な命名規則がある場合、ファイル名を選択してHTMLに入れることができます一連の：

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

Firefox 48.0（OS X）で本文が機能していないように見えた後、隠された 'content：url（）'を適用する@Kristianの方法。

ただし、「display：none;」の変更次のようなものに：

body:after {
 position: absolute; overflow: hidden; left: -50000px;
 content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg);
}

...私のためにトリックをしました。おそらく、Firefoxは非表示の画像を読み込まないか、レンダリング（？）に関連している可能性があります。

1
hdscp

この手法はうまく機能し、ホバーイメージが事前に読み込まれているだけでなく、表示の準備ができて待機していることも保証します。 （他のほとんどのソリューションは、ホバーで背景画像を切り替えることに依存しています。これは、ブラウザが少し時間がかかるように見えますが、多くの画像がプリロードされています。）

2つの画像を含むコンテナに：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; }
}
0
Colin James Firth

「元の背景画像を2倍にする」トリックはうまくいかなかったので、別の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;
}
0
Nailgun

同じサイズの場合、2つの画像をCSS :hoverを持つトップ画像のクラスdisplay: none;

これにより、両方の画像がプリロードされますが、ホバリングすると2番目の画像が表示されます。

0
asc99c

画像をプリロードできます

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);
0
Anshuman Jasrotia