WEBデザインテクニック|KLUTCHE

【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】ロールオーバーで画像を差し替えるの方法を使うと先読みまで同時にこなしてくれるので、こちらが楽チンだと思います。

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

“【jQuery】を使った画像の先読み” への1件のコメント

  1. コーンゴーンポーン より:

    初めまして、コーンゴーンポーンという高橋と申します。

    jqueryを勉強しだして1か月ほどのものですが、
    balloon表示とスライドショーを同時に行うという課題をクリアすべく
    奮闘しているものです。私の理解度が低く、教えてください。

    12/10/20書き込みのpreloadの方法を閲覧して
    課題
    1.画像が配列が10×10程度の2次元で、約100枚程度あり、一つ一つ
    body部に指定するのは、厳しい
    2.書き込みの2つ目のpreload( 以下の
    ダイレクトの画像指定が、2次元のグループ分けされている関係で、
    どう表現したらよいかわかりません。

    お時間があれば、解決法をご教授お願いできれば幸いです。
    よろしくお願いいたします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です