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要素はドキュメント内に配置しません。 プリロード用のダミー要素です。

これだけで画像のプリロードができます。 大きなサイズの画像がある場合はぜひ試してみてください。

JavaScript入門