javascript 画面幅によって画像を切り替える

Posted 2021-05-04

<!-- https://www.tam-tam.co.jp/tipsnote/javascript/post8851.html -->

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

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

$(function() {
  // 置換の対象とするclass属性。
  var $elem = $('.js-image-switch');
  // 置換の対象とするsrc属性の末尾の文字列。
  var sp = '_sp.';
  var pc = '_pc.';
  // 画像を切り替えるウィンドウサイズ。
  var replaceWidth = 768;

  function imageSwitch() {
  // ウィンドウサイズを取得する。
  var windowWidth = parseInt($(window).width());

  // ページ内にあるすべての`.js-image-switch`に適応される。
  $elem.each(function() {
  var $this = $(this);
  // ウィンドウサイズが768px以上であれば_spを_pcに置換する。
  if(windowWidth >= replaceWidth) {
  $this.attr('src', $this.attr('src').replace(sp, pc));

  // ウィンドウサイズが768px未満であれば_pcを_spに置換する。
  } else {
  $this.attr('src', $this.attr('src').replace(pc, sp));
  }
  });
  }
  imageSwitch();

  // 動的なリサイズは操作後0.2秒経ってから処理を実行する。
  var resizeTimer;
  $(window).on('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
  imageSwitch();
  }, 200);
  });
});