jQuery: 画像をプリロードする方法
サイトに大きなサイズの画像を表示する場合、 タイムラグが生じることがあります。
これは、表示するときに画像を初めて読み込むためで、 画像の読み込みに時間がかかるとタイムラグが生じます。
スムーズに画像を表示させるには、画像を前もって取り込んでおく方法をとります。 これをプリロード(preload)といいます。
次のようなコードでプリロードを実現できます。
// 画像用配列
var images = [
'img/img01.png',
'img/img02.png',
'img/img03.png'
];
// jQueryの$(document).ready()
$(document).ready(function(){
// 画像プリロード
getImages();
});
// 画像プリロード用関数
function getImages(){
for (i = 0; i < images.length; i++){
$('<img>').attr('src',images[i]);
}
}
最初に画像用の配列を用意して、$(document).ready()時に画像を読み込むようにします。 上のサンプルでは画像プリロード用関数を定義していますが、まとめて次のように記述しても同じです。
// 画像用配列
var images = [
'img/img01.png',
'img/img02.png',
'img/img03.png'
];
// jQueryの$(document).ready()
$(document).ready(function(){
// 画像プリロード
for (i = 0; i < images.length; i++){
$('<img>').attr('src',images[i]);
}
});
ポイントはimg要素を作成する所です。
$('<img>').attr('src',images[i]);
ただimg要素を作成するだけで、これをドキュメント内に配置するわけではありません。 これだけで画像をプリロードすることができ、画像の表示がスムーズになります。
大きなサイズの画像を使用する場合は、ぜひ試してみてください。