• twitter
  • Facebook
  • はてなブックマーク
2012年02月20日(月)

[jQuery] 画像の簡易プレロード

画像を事前に読み込んでおくプレローダーの実装方法を紹介します。画面に出力されない画像を事前に読み込んでおくことで、ギャラリーやロールオーバー画像を使った、スムーズな切り替え処理を使う事ができます。

例えば、ロールオーバー画像の切り替えを行う際に、マウスオーバーで始めて画像をロードすると一度目のロールオーバーでは効果が出ないケースなどを防ぎます)
背景画像によるhover処理だけなら「CSS Sprite」を使って実装することもできます。あくまで表示前に読み込むためのもので、読み込み完了までの時間は、通信状態やファイルサイズにも依存するので注意して下さい。


  1. <script>
  2. $("body").ready(function(){
  3. // preloadというクラス名を設定したimgタグのsrc属性に「_ov」がつく画像をプレロードする
  4. $('.preload').each(function(){
  5. var im = new Image(); im.src = $(this).attr('src').replace(/\.(jpg|png|gif)/, '_ov.$1');
  6. /* デバッグ用 im.onload = function(){ $("body").append(this); } */
  7. });
  8. });
  9. </script>

サンプル[Sample]
上記の例では、<img src="my_image.png" class="preload" />というタグを書いたとして、my_image_ov.pngを事前にキャッシュしています。ロールオーバーで画像が切り替わります。さらにロールオーバー処理を利用する場合、次のように記述します。
  1. <script>
  2. $("body").ready(function(){
  3. $('.preload')
  4. .each(function(){ var im = new Image(); im.src = $(this).attr('src').replace(/\.(jpg|png|gif)$/, '_ov.$1')})
  5. .hover(function(){ var src = $(this).attr('src'); $(this).attr('src', src.replace(/\.(jpg|png|gif)$/, '_ov.$1')); }, function(){ var src = $(this).attr('src'); $(this).attr('src', src.replace(/_ov\.(jpg|png|gif)$/, '.$1')); });
  6. });
  7. </script>

関連投稿記事

Comment: