画像をプリロードする方法

サイトに大きなサイズの画像を表示する場合、 タイムラグが生じることがあります。

これは、表示するときに画像を初めて読み込むためで、 画像の読み込みに時間がかかるとタイムラグが生じます。

スムーズに画像を表示させるには、画像を前もって取り込んでおく方法をとります。 これをプリロード(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要素を作成するだけで、これをドキュメント内に配置するわけではありません。 これだけで画像をプリロードすることができ、画像の表示がスムーズになります。

大きなサイズの画像を使用する場合は、ぜひ試してみてください。

実践編

小技編

メソッド

関連サイト