JavaScript: 画像をプリロードする
JavaScriptで画像をプリロードする方法を紹介します。
大きなサイズの画像がたくさんある場合、事前に画像を読み込んでおくことで画像の表示がスムーズになります。
事前に画像を読み込んでいない場合は、表示するタイミングで画像を読み込みます。 この時、画像のサイズによっては読み込みに時間がかかり、表示が遅れてしまいます。
ですから、大きなサイズの画像が複数ある場合は、なるべくプリロード(事前に読み込み)するようにしましょう。
次のようなコードでプリロードできます。
// 画像用配列 var images = [ 'img/img01.png', 'img/img02.png', 'img/img03.png' ]; window.onload = function(){ // 画像プリロード getImages(); } // 画像プリロード用関数 function getImages(){ for (i = 0; i < images.length; i++){ var img = document.createElement('img'); img.src = images[i]; } }画像用の配列を用意し、window.onload時に画像のプリロード処理を行います。 上のコードではプリロード用の関数を別に作成していますが、 まとめて下のように記述してもよいでしょう。
// 画像用配列 var images = [ 'img/img01.png', 'img/img02.png', 'img/img03.png' ]; window.onload = function(){ // 画像プリロード for (i = 0; i < images.length; i++){ var img = document.createElement('img'); img.src = images[i]; } }どちらにしても必要なのは次の2行です。
var img = document.createElement('img');
img.src = '画像のURL';
作成したimg要素をconsole.log()で表示させると次のように表示されます。
<img src="img/img01.png">
<img src="img/img02.png">
<img src="img/img03.png">
このようにimg要素を作成するだけで、画像がプリロードされます。 ここで作成したimg要素はドキュメント内に配置しません。 プリロード用のダミー要素です。
これだけで画像のプリロードができます。 大きなサイズの画像がある場合はぜひ試してみてください。