hoverでbackground-imageを変更した際にちらつくのを防止する

CSSのhoverでbackground-imageの画像を変更した際、変更後の画像読み込みでちらつくのを防止する方法をメモ。

サンプルコード

まずは対応前のサンプルです。

<div class="sample"></div>

.sample {
	background: url(default.jpg) center center no-repeat;
	background-size: contain;
}
.sample:hover {
	background-image: url(hover.jpg);
}

この場合はhoverしたタイミングで画像を読み込むので、読み込み終わるまで一瞬画像が表示されません。
また、2回目以降やキャッシュがある場合は画像が読み込まれた状態になるため、ちらつきは発生しません。
対応前のデモページ

疑似要素で事前に画像を読み込むようにしてみます。

.sample {
	background: url(default.jpg) center center no-repeat;
	background-size: contain;
}
.sample::before {
	content: '';
	background-image: url(hover.jpg);
}
.sample:hover {
	background-image: url(hover.jpg);
}

デベロッパーツールのNetworkを確認すると、ページアクセス時点でホバー画像が読み込まれているのが確認できます。
疑似要素で読み込むデモページ

疑似要素を既に使用している場合などで使えない場合、背景画像を2つ指定する形でも対応できます。

.sample {
	background:
		url(default.jpg) center center no-repeat,
		url(hover.jpg) center center no-repeat;
	background-size: contain, 0 0;
}
.sample:hover {
	background-size: 0 0, contain;
}

2つ目にホバー画像を指定して、background-size を0にして表示されないようにしています。
hover時にはbackground-sizeを変更して、通常画像を非表示にしてホバー画像を表示するようにします。
背景を複数指定するデモページ