jqueryで複数の画像をあらかじめ読み込んでおく方法。

2015年12月13日

とっつぁん

この記事は 2 分くらいで読めると思います

あとで読む

プレロード

あらかじめ読んでおく

今回はjqueryのプレロードのお話。

最近は回線も速いし、パソコンの処理速度も速いのであんまり気にならない事かもしれませんが、とりあえずワタクシは気になったことがあるのでメモメモ。

解決したい問題点

画像のスライドショーやマウスオーバーでの画像切り替え等を実装した時に、通常は切り替えの瞬間に画像を読み込みます。

その為一瞬の読み込む間があったり、回線やマシンパワーの少ないPCだとなかなか画像が表示されなかったり、という事が起きます。

解決策

ブラウザにはキャッシュという機能があります。

一度閲覧した画像は一時的にブラウザがキャッシュフォルダに保存しておいて、同じ画像を表示する時は新たに読み込まずにキャッシュの中にある画像を表示させる、という機能です。

ブラウザに覚えさせたい画像を表示されていない段階で予め読み込ませる指定です。

以下のように書きます。

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/sample01.jpg',
    'img/sample02.jpg',
    'img/sample03.jpg'
]);

※コピペする場合、画像のパスは書き換えてください。

参考：javascript - Preloading images with jQuery - Stack Overflow