jQueryで画像をプリロードする方法を解説！
jQueryで画像をプリロードする方法をサンプルコード付きで解説します。1枚の写真や複数枚の画像をプリロードする方法を習得しましょう。
画像のプリロード
画像をロールオーバーで、他の画像に差し替えるなど、「画像が後から登場する」場合に表示が遅延する場合があります。
この画像の表示遅延の回避策として画像のプリロードという仕組みがあります。
今回はjQueryで画像をプリロードする方法をサンプルコード付きで解説します。
jQueryで画像をプリロードする方法
シンプルに画像をプリロードする
jQueryで画像をプリロードするのはとても簡単です。下記のようにjQueryを記述するだけで該当画像をプリロードさせることが出来ます。
jQueryで画像をプリロードする方法
// 画像のプリロード
$('<img src="画像URL">');これはjQueryでimg要素を生成して、src属性に該当画像の割り当てをしています。もちろん表側には何も出ていない状態ですが、上記のコードだけで裏側で画像が読み込まれいつでも表示できる待機状態になります。
複数枚の画像をプリロードする
今度は1枚ではなく複数枚の画像をjQueryでプリロードさせてみましょう。仕組みは同じですが、今回は画像を配列でまとめて一気にプリロードさせます。
jQueryで複数画像をプリロードするコード
// 複数画像をプリロードする関数
function preloadImgs() {
for(var i = 0; i< arguments.length; i++){
$('<img src=' + arguments[i] + '>');
}
}
preloadImgs('画像AのURL', '画像BのURL', '画像CのURL');
今回preloadImgsという関数を用意しました。引数には複数の画像をURLを取ります。関数の中身は先程と同じでjQueryでimg要素を生成し、src属性に画像のURLを渡しています。
これで一気に複数画像をjQueryを使ってまとめてプリロードすることが出来ます。
上記のサンプルコードではpreloadImgs関数で画像をプリロードしています。
まとめ
いかがでしたでしょうか。
画像が後から登場するWEBサイトで画像の遅延やちらつきが気になる方はぜひ今回の方法をお試し下さい。jQueryを使うと簡単に画像のプリロードをすることが出来ます。
また画像のプリロードはjQueryを使わなくてもJavaScriptで実装することが出来ます。jQueryを使わずにJavaScriptで画像をプリロードする方法は下記を参考にしてみて下さい。
