Javascript

画像をプリロード(事前読み込み)する方法

プリロード(事前読み込み)

マウスオーバーで画像を変更する場合などで画像データが重かったりすると、読み込みまでの時間がかかって表示されなかったりすることがあります。

そういう時にプリロード(事前読み込み)をしておくことで少しでも改善する方法MEMO。

サンプルコード

$(function () {
    //画像のプリロード
    function preload_images() {
        var images = [];
        for (var i = 0; i < arguments.length; i++) {
            images[i] = new Image();
            images[i].src = preload_images.arguments[i];
        }
    }
    //事前に読み込む画像パス
    preload_images(
        "./img/img01-on.jpg",
        "./img/img02-on.jpg",
        "./img/img03-on.jpg",
    );

    //マウスオーバー
    var $img_item = $('.img_item');
    var img_src_off, img_src_on;
    $img_item.hover(function () {
            img_src_off = $(this).find('img').attr('src');
            img_src_on = img_src_off.replace('-off', '-on');
            $(this).find('img').attr('src', img_src_on);
        },
        function () {
            $(this).find('img').attr('src', img_src_off);
        });
});

画像プリロードしたデモ

マウスオーバーで画像が変更されます。
上段はマウスオン画像を事前に読み込んでいます。
下段は何もしていません。

多少なり、表示までのスピードの違いが感じられると思います。