JavaScriptで画像のプリロードをする方法を解説！

例えば画像にカーソルを当てると別の画像に差し替える場合などでは、カーソルが当たった瞬間に画像を読み込むため、そこで容量が大きめの画像だと、ネットワーク速度によっては画像の読み込むが遅くデザイン上違和感が発生し、好ましくない体験が発生します。

例えば下記のサンプルコードを見てみましょう。

上記のサンプルコードのプレビューではマウスオーバーすると画像が差し替わりますが、ネットワーク速度が遅かったり、画像の容量が大きいと、読み込むまでに時間がかかり遅延が発生します。特にスマホなど低速なネットワークでの場合は余計遅延が目立つ事があります。

そこで画像のプリロードという手法があり、プリロードは画像が表に出ていない状態でも、予め画像を読み込んで置くことで、後から画像を表側に表示する際にも遅延無しですぐに表示させる仕組みの事です。

今回はこのようなプリロードの仕組みをJavaScript読みを使って実現させる方法をサンプルコード付きで解説します。

早速JavaScriptで画像のプリロードをしてみたいと思います。下記のサンプルコードを見てみましょう。

上記のサンプルコードではindex.jsで画像のプリロードを行っています。そのやり方ですが、まずプリロード対象となる画像を配列でまとめます。

for文で画像の配列を処理し、document.createElementでimg要素を生成します。そのsrc属性に画像のパスを割り当てることで画像がプリロードされます。
（生成したimg要素は表側に表示されません）

今回はJavaScriptのみでプリロードを実装しましたが、jQueryを使ってもプリロードは実装することが出来ます。ぜひ下記も参考にしてみて下さい。