【jQuery】PCとスマホで表示する画像を切り替える方法

今回はブラウザ幅に応じて表示される画像を切り替える方法を紹介します。

表示する画像を切り替えることによってレスポンシブデザインでも柔軟に対応できるというメリットがあります。

 

PCとスマホで表示する画像を切り替える方法

HTML

HTMLでは「.js-image-switch」クラスを指定してjQueryで画像を切り替えます。なお、このクラスにはCSSは指定しません。

PC用とスマホ用に画像を2枚用意しておきましょう。

<!-- 768px未満 -->
<img src="image_sp.png" alt="" class="js-image-switch">

<!-- 768px以上 -->
<img src="image_pc.png" alt="" class="js-image-switch">

 

jQuery

コードは以下の通りです。

$(function() {
  var $elem = $('.js-imageChange');
  var sp = '_sp.';
  var pc = '_pc.';
  var replaceWidth = 768;

  function imageSwitch() {
    var windowWidth = parseInt($(window).width());
    $elem.each(function() {
      var $this = $(this);
      if (windowWidth >= replaceWidth) {
        $this.attr('src', $this.attr('src').replace(sp, pc));
      } else {
        $this.attr('src', $this.attr('src').replace(pc, sp));
      }
    });
  }
  imageSwitch();
  var resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      imageSwitch();
    }, 200);
  });
});

 

処理内容は以下の通りです。

  1. ウィンドウサイズを取得
  2. attr()でsrc属性値を取得
  3. replace()でファイル名の末尾を置換
  4. リサイズ(ウィンドウサイズが変更)されたら、そのたびに処理を実行

 

置換対象とするファイル名のキーワードを変数に格納する際に、「_sp.」といったようにドットまで加えています。これは「_special」のようなファイルまで置換されてしまうのを防ぐためです。

また、画像のファイル名を基準に文字列の置換を行なっているので、PCで表示する画像には「_pc」、スマホで表示する画像には「_sp」と末尾につけることを忘れないでください。

 

リサイズの処理ではdebounceというバターンを使って関数を実行するタイミングを少しだけ遅らせています。今回は200を指定しているのでリサイズが終わってから0.2秒後 に画像が切り替わります。

 

まとめ

画像のファイル名に気をつける必要がありますが、割と簡単に画像の切り替えができます。

jQueryを使っているのでどのブラウザでも確実に処理できるのもまたいいですね。