【レスポンシブ】jQueryでウィンドウサイズによって画像を差し替え

• Web Create
• 2016.09.11

トライムでは殆どの案件がレスポンシブWebデザイン対応しています。
下記の記事にも書いていますが、サイトによってはPCとスマートフォンのシェアが逆転することもあり、スマートフォンへの対応は欠かせなくなっていますね。

BtoB・BtoC向けWebサイトデザインのポイント

沢山のサイトを作っていく中で、少しずつ効率化していった技術があり、今回はその一部をご紹介いたします。

画像を差し替える

レスポンシブWebデザインでよくあるのが、PC用とSP用の画像の差し替えです。

SVGに対応したブラウザの普及で、同じ形の画像をPC用とスマートフォン用に分ける必要性はなくなってきてはいますが、やはり画面サイズの違いから、形の異なった画像に差し替えなければいけないケースは多々あります。

そんな時、例えばCSSだけで実現しようとした場合、下記のような方法が考えられます。

HTML

<img class="pc" src="pc_img.png">
<img class="sp" src="sp_img.png">

CSS

.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

あらかじめ2つの画像をHTMLに書いておき、display: noneで非表示にさせる方法です。
768px以下になった時に.spが表示され、逆に.pcは消えます。
これでも表示に問題はないのですが、やはりコーダーとしてはこのソースは気持ちが悪いですね。

jQueryで動的に差し替える

そこで社内ではこのような方法で対応しています。

HTML

<img src="pc_img.png">

用意する画像はpc_hoge.jpg、sp_hoge.jpgのように、名前の先頭にPC用の画像には「pc_」を、スマートフォン用の画像には「sp_」を付け、同じディレクトリに配置します。

JS

$(window).on('load resize', function(){

  var w = $(window).width();
  var x = 768; //画像を差し替えを実行するウィンドウサイズ

  if (w <= x) {

    var before = 'pc_',
        after = 'sp_';

    replaceImg();

  } else {

    var before = 'sp_',
        after = 'pc_';

    replaceImg();

  }

  function replaceImg(){
    $('img[src*=pc_],img[src*=sp_]').each(function(){
      var img = $(this).attr('src').replace(before, after);
      if( $(this).attr('src').match(before) ) {
        $(this).attr('src', img);
      }
    });
  }

})

1行目の記述で読み込み時とウィンドウのリサイズ時にイベントが発火します。
3行目で現在のウィンドウサイズを変数に入れ、4行目では画像を変更したいサイズを指定しています。

6行目がw（ウィンドウサイズ）がx（指定した数値）と等しいか、それよりも小さかったらという分岐です。

等しいか、それよりも小さかった場合、変数のbeforeには「'pc_'」が入り、afterには「'sp_'」が入ります。条件を満たさない場合はelseが実行され、before、afterが逆になります。

あとはreplaceImgという関数が実行され、src属性の中身がbeforeからafterへと置換されます。

サンプル

ウィンドウサイズを変更して試してみてください。

まとめ

最近はスマートフォンがメインのサイトも増え、どちらの画像を主とするかで、あらかじめHTMLに書いておく画像は変更が必要かもしれませんが、上記のJSであればどちらのケースにも対応できます。是非活用してみてください。