class-btn
を含むクラスbackground-image
でホバーすると、背景画像を変更するアンカーがあります。
ホバリングすると、
a.class-btn:hover
{
background-image('path/to/image-hovered.jpg');
}
ページが初めて読み込まれ、このボタンを初めてホバーすると、点滅します(ホバーされた画像をダウンロードするのに約0.5秒かかります)。 JavaScriptなしでその点滅を回避するにはどうすればよいですか(単純なCSSとHTMLのみが許可されています)?
Stack Overflowで同様の質問を検索しようとしましたが、運はありませんでした。
追加したばかり:
これはすべてのブラウザーで発生するため、ソリューションはすべてのブラウザーで機能するはずです。
ここに、私が何度か使ったシンプルで効果的な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; }
詳細は画像によって異なります。オンライン スプライトジェネレーター を使用して、プロセスを簡単にすることもできます。
私が使用する簡単なトリックは、元の背景画像を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;
}
これを行う場合:
#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ソリューションです:ホバー画像が1つのディレクトリにあり、サブストリング「-on」を含むなどの一般的な命名規則がある場合、ファイル名を選択してHTMLに入れることができます一連の:
<img src='...' style='display: none' />
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は非表示の画像を読み込まないか、レンダリング(?)に関連している可能性があります。
この手法はうまく機能し、ホバーイメージが事前に読み込まれているだけでなく、表示の準備ができて待機していることも保証します。 (他のほとんどのソリューションは、ホバーで背景画像を切り替えることに依存しています。これは、ブラウザが少し時間がかかるように見えますが、多くの画像がプリロードされています。)
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; }
}
「元の背景画像を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;
}
同じサイズの場合、2つの画像をCSS :hover
を持つトップ画像のクラスdisplay: none;
これにより、両方の画像がプリロードされますが、ホバリングすると2番目の画像が表示されます。
画像をプリロードできます
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);