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で画像を先読みさせる際にぜひ。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryで画像をプリロードする方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR