Webページ上でJavaScriptやjQueryなどを使って
ロールオーバーやタブ切り替えの様な
何かのアクションによって画像を表示する動作を組み込んだ際
画像をロードするのに少し時間がかかることによって
一瞬画像部分がチラつくことがあります。
その現象を回避する為に、切り替え後に表示する画像ファイルを
前もって読み込んでおく画像プリロードがありますが、
これをjQueryを使って実装する方法を自分用メモとして紹介。
jQueryで画像をプリロードする方法
画像プリロードについてはHTMLとCSSは特に関連しないので
スクリプトのみの記述方法について。
複数枚の画像ファイルを一度に
プリロードする記述方法は以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
jQuery.preloadImages = function(){
for(var i = 0; i<arguments.length; i++){
jQuery("<img>").attr("src", arguments[i]);
}
};
$.preloadImages("img/image1.jpg","img/image2.jpg","img/image3.jpg","img/image4.jpg","img/image5.jpg");
});
</script>
10行目の「$.preloadImages()」のところで
実際に読み込む画像のディレクトリパスとファイル名を指定します。
（複数画像を指定する場合はカンマで区切る）
画像プリロードは単純なJavaScriptでも簡単に実装することができますが
jQueryでもこのような記述によって、前もって画像を読み込んでおくことができるようです。
【参考記事】jQueryまたはcssで画像の先読み（プリロード）を行うJavaScriptプログラムメモ｜プログラムメモ
jQueryで画像を先読みさせる際にぜひ。。。