jQueryを使った超簡単な画像のプリロード

ぷりろーど?

一昔前までは、JavaScriptでプリロードと言えば、それ専用のスクリプトが配布されたり活発に議論されたりするくらい、動きのあるホームページのクォリティを上げるためのテーマの一つでした。 プリロードが書けるか否かでプログラマーとしての質が問われたり問われなかったりしたものです。 ・・はい、若干大げさですね。

カンタンに説明すると、画像を複数枚切り替えてアニメーションするようなJavaScriptを書く場合、画像オブジェクトが表舞台に出てきた時に始めて画像読み込みが始まるために一瞬デッドリンクっぽくなる現象を回避するため、裏で事前に画像をメモリ上に読み込んでおくことをプリロード(=事前読み込み)といいます。

ローカルマシンで開発してる時は読み込みスピードが速いので気づきにくいのですが、本番サーバにアップロードすると外の回線を通るため画像ロードに時間がかかりそこで始めて気づくため、納品日当日によくお目にかかる症状です

jQueryをありがとう

プログラム的には「使う画像を全て事前に読み込んでおく」ってだけの話なのですが、jQueryがなかった時代は若干面倒だったりブラウザ依存の検証が大変でした。
それがjQueryだと、これだけでOKです。

<script>
$('<img src="image.png">');
</script>

こうすることで、まずimage.pngがメモリ上にキャッシュされ、次にJavaScriptで画像切り替えアニメーションなどで同じimage.pngを読んだ際に、既にメモリ上にあるキャッシュを使用するためすぐに画像が表示される、という仕組みです。 ちなみに、これを実行しても、メモリ上で画像データが展開されるだけで、<img>タグは画面上にもDOM上にも出力されません。

また、記述する場所ですが、jQuery本体のロード直後に書いてOKです。$(function(){~});の外でもOKです。DOMの生成を待ってる必要ないので。

たくさんある場合は、こんな感じでたくさん書くといいです。

<script>
$('<img src="image1.png">');
$('<img src="image2.png">');
$('<img src="image3.png">');
$('<img src="image4.png">');
$('<img src="image5.png">');
</script>

複数の画像パスが入った配列を渡すだけでプリロードしてくれるような関数なんかを書いてもいいのですが、汎用的にしたところで意外といじらなかったりするので、上記のようにただ列挙するだけの方が有用だったりします。

以上、ご参考まで。