jquery jQuery で画像をプリロード

CATEGORY: jQuery

2014年12月26日

画像ファイルを前もって読み込んでおくプリロードに関する個人的なメモ。

ロールオーバーなどにより画像を表示する場合、切り替える画像のロードに時間がかかり、画像がちらつくことがあるので、それらの画像ファイルを前もって読み込んでおく方法。

目次

基本的な構文

jQuery で前もって読み込んでおく画像ファイルを以下のように記述するだけ。

$("<img>").attr("src", "画像のパス" );

または、

$('<img src="画像のパス">');

これにより画像がメモリ上にキャッシュされる。

jQuery では　$(“～”)内に HTML を記述すると、HTML を「内部的」に生成する。

複数の画像を読み込めるように関数にしておく

mypreload() という関数にしておく場合の例。

function mypreload() {
    for(var i = 0; i< arguments.length; i++){
        $("<img>").attr("src", arguments[i]);
    }
}
//関数の呼び出し。引数には先読みしておく画像のパスを指定  
mypreload('images/preload/3.jpg', 'images/preload/4.jpg');

簡単なサンプル

マウスオーバーすると画像を変える例。予め表示する画像とマウスオーバー時に表示する画像の名前は同じ名前にしておき、それぞれ「images」「images/preload」というフォルダに保存。

サンプル：最初の2つのロールオーバーはプリロードなし、後の2つのロールオーバーはプリロードあり

HTML

<h2> No Preload</h2>
<div class="group">
      <div><img src="images/1.jpg"  alt=""></div>
      <div><img src="images/2.jpg"  alt=""></div>                 
</div>
<h2>Preload</h2>
<div class="group">
      <div><img src="images/3.jpg"  alt=""></div>
      <div><img src="images/4.jpg" alt=""></div>                    
</div>

jQuery

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
jQuery(function($){
  //ロールオーバー  
  var img_src, mo_img_src;
  $('.group img').hover(function() {
    img_src = $(this).attr('src');
    mo_img_src = img_src.replace(/images/, "images/preload");
    $(this).attr('src', mo_img_src);    
  }, function(){
    $(this).attr('src', img_src);
  });
  
  //プリロード
  function mypreload() {
        for(var i = 0; i< arguments.length; i++){
            $("<img>").attr("src", arguments[i]);
        }
    }
  
    mypreload('images/preload/3.jpg', 'images/preload/4.jpg');

});
</script>

プリロードをロールオーバーの記述に含める

プリロードを別の関数にしておくのではなく、ロールオーバーの記述に含める方法。

var img_src, mo_img_src;
$('.group img').hover(function() {
    img_src = $(this).attr('src');
    mo_img_src = img_src.replace(/images/, "images/preload");
    $(this).attr('src', mo_img_src);    
    }, function(){
        $(this).attr('src', img_src);
    }).each(function(){
        $("<img>").attr("src",$(this).attr("src").replace(/images/, "images/preload"));
});

each() を使う

「複数の画像を読み込めるように関数にしておく」では、引数に画像のパスを指定しなければならず、それでは面倒な場合もある。

例えば以下のような構造の HTML がある場合。サムネイル画像をクリックすると、拡大画像が表示される Lightbox のような例。

<div class="work_item">
    <a href="images/works/1.jpg"><img src="images/works/thumb/1.jpg" alt=""></a>
    <p>Title 1</p>  
</div><!-- end of .work_item-->     
<div class="work_item">
    <a href="images/works/1.jpg"><img src="images/works/thumb/1.jpg" alt=""></a>
    <p>Title 2</p>  
</div><!-- end of .work_item-->
・・・

ある程度の数なら、引数に画像のパスを指定しても大変ではないが、数が多いと面倒。

jQuery の each() を使うと以下のようにしてプリロードすることができる。以下の例は画面幅が 800px より大きい場合はプリロードする例。

if($(window).width() > 800) {
    $('.work_item a').each(function() {
        $("<img>").attr("src", $(this).attr('href'));
    });
}