【jQuery】を使った画像の先読み

ロールオーバー画像を使用する時など、あらかじめブラウザに画像をダウンロードさせておくと、タイムラグ無く画像を表示できます。
今回のは、jQueryを使って先読みさせる方法です。

HTML

jQueryを使うので、先読みのスクリプトを書く前にjQueryファイルを読み込んでおきます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Javascript

jQueryで画像を先読みさせるには

jQuery("<img>").attr("src", "url");

これだけでOKです。

たくさんの画像を先読みさせる場合は、一工夫。

preload = function(){
	for(var i = 0; i<arguments.length; i++){
		jQuery("<img>").attr("src", arguments[i]);
	}
};

preload(
	"/img/sample01.jpg",
	"/img/sample02.jpg",
	"/img/sample03.jpg",
	"/img/sample04.jpg",
	"/img/sample05.jpg"
);

配列内の画像を先読みする関数を作っておいて、複数画像を一度に処理させます。

preload();の中に先読みさせたい画像のURLを,(カンマ)区切りで記入します。

追記

ロールオーバー画像を使いたい場合は、【jQuery】ロールオーバーで画像を差し替えるの方法を使うと先読みまで同時にこなしてくれるので、こちらが楽チンだと思います。

先読み機能だけ個別で使いたい場合は、今回の方法を使うと良いと思います。