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

プレロード

あらかじめ読んでおく

今回は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

ホントにキャッシュされてんの？

これ結構分かりにくいんですよね（笑）

「プレロードの指定しては見たけど、これホントに正常に動いてる？」みたいな…

という事で、キャッシュの確認方法も書いておきます。

Google chromeのキャッシュ確認方法

Google chromeのアドレスバーに chrome://cache/ と入力します。

するとキャッシュしたURLがずらーっと出てくると思います。

履歴　＞　閲覧履歴データの消去　からキャッシュを一旦削除する等して確認すればOKです。

Internet Explorerのキャッシュ確認方法

ツール　＞　インターネットオプション　＞　設定（全般タブ）　＞　ファイルの表示

ファイルの表示をクリックして開く場所がキャッシュの保存場所です。