月刊JAVASCRIPT – コーダーは「JS」がやめられない！ Vol.4 –

$(function () {
  //変数spに文字列[150x150.]を代入
  var sp = '150x150.';
  //変数pcに文字列[600x300.]を代入
  var pc = '600x300.';
  //変数replaceWidthに[768]を代入
  var replaceWidth = 768;
  //関数[imageSwitch]を定義
  function imageSwitch() {
    //変数windowWidthにウィンドウの内側の幅を数値型の整数で代入
    var windowWidth = parseInt(window.innerWidth);
    //class[js-image-switch]に対して繰り返し処理を行う
    $('.js-image-switch').each(function() {
      //変数thisにclass[js-image-switch]を代入
      var $this = $(this);
      //もし、ウィンドウの大きさが768px以上なら
      if (windowWidth >= replaceWidth) {
        //画像のファイル名の「150x150.」を「600x300.」に置換する
        $this.attr('src', $this.attr('src').replace(sp, pc));
      //それ以外なら(ウィンドウの横幅が767px以内なら)
      } else {
        //画像のファイル名の「600x300.」を「150x150.」に置換する
        $this.attr('src', $this.attr('src').replace(pc, sp));
      }
    });
  }
  imageSwitch();

  var resizeTimer;
  //ウィンドウをリサイズしたら
  $(window).on('resize', function() {
    //resizeTimerのタイムアウトを解除
    clearTimeout(resizeTimer);
    //imageSwitchは200ミリ秒で起動する
    resizeTimer = setTimeout(function() {
      imageSwitch();
    }, 200);
  });
});

今回はダミー画像を使用しているため、画像名に画像サイズを入れているから、それを置換しています。
本来コーディングする際には[-sp][-pc]のような名前を付けて置き、それを画面幅に応じて置換させてあげると良いです。

200ミリ秒をセットしてるのは、リサイズ中に何回も置換するのを防ぐために書いています。

おわりに

今回で本シリーズは最終回となるので、新しいネタ探しをしようかと思っています。

書く頻度が落ちてきてるので、次回は長文記事を予定しているのでこうご期待～✋