画像をプレロードする方法
ここでは画像をHTML、CSS、JavaScript各々利用してプレロードする方法をまとめます。画像のプレロードが必要になるのは主にマウスオーバーで画像を切り替えるような場合です。この場合、前もって読み込まないと画像の高さ、幅が読み込まれるまでマウスオーバー時に表示がカクついてしまいます。
HTMLを利用してプレロード
HTMLだけで画像をプレロードします。
<head>
<link rel="preload" href="preload_image.jpg" as="image">
</head>
CSSを利用してプレロード
CSSを利用して画像をプレロードします。以下の例の場合、プレロードしているのは先に読み込んでいるimage1.jpgです。画面上にはimage2.jpgが表示されている状況になります。
.test {
background-image: url(image1.jpg);
background-image: url(image2.jpg);
}
CSSスプライト
CSSスプライトとはhover前後の画像を1画像で作成し、その表示位置をCSSでずらすことにより画像を切り替える方法です。本来は画像ファイルの読み込み回数を減らす用途に利用されますが、プレロードと同様の効果を得ることができる有効な手法です。
JavaScript(JQuery)を利用してプレロード
JavaScript(JQuery)を利用して画像をプレロードします。
<script>
$(function(){
$.preloadImages = function(){
for(var i = 0; i<arguments.length; i++){
$("<img>").attr("src", arguments[i]);
}
};
$.preloadImages("img/image1.jpg","img/image2.jpg","img/image3.jpg");
});
</script>