imageSet.js

スクリプト

$(function() {
  // 処理の対象になる要素を取得。
  var $imageSet = $('.js-image-set');
  // ブレイクポイントを2箇所指定する。
  var tb = 768;
  var pc = 1000;

  function imageSet() {
    // 現在のウィンドウサイズを取得する。
    var windowWidth = window.innerWidth;

    $imageSet.each(function() {
      var $this = $(this);
      // カスタムデータ属性から取得し、変数に格納する。
      var $data = $this.data('image-set');

      /**
       * @desc - arguments(可変長変数)を配列に変換します。
       * @param {arguments} args - 引数はブラケット`[]`で囲んで渡します。
       */
      function convertIntoArray(args) {
        return Array.prototype.slice.call(args);
      }

      /**
       * @desc - 配列の中から、空文字以外で最初に渡した文字列を返します。
       * @param {Array} data
       */
      function selectData(data) {
        len = data.length;
        for(var i = 0; i < len; i++) {
          if(data[i]) {
            return data[i];
          }
        }
      }

      // 配列に変換した可変長引数を代入する変数の初期化。
      var arrayData = [];
      // convertIntoArray関数に複数の文字列を渡して、配列に変換する。
      if(windowWidth >= tb && windowWidth < pc) {
        arrayData = convertIntoArray([$data[1], $data[0], $data[2]]);
      } else if(windowWidth >= pc) {
        arrayData = convertIntoArray([$data[2], $data[1], $data[0]]);
      } else {
        arrayData = convertIntoArray([$data[0], $data[1], $data[2]]);
      }

      // selectData関数で引数に渡した配列の空の文字列以外の文字列を
      // [0]から優先して取得して、src属性を書き換える。
      $this.attr('src', selectData(arrayData));
    });
  }
  imageSet()

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

カスタムデータ属性には画像ファイルのパスか、空文字を含めた文字列を3つ指定する。指定していない（空文字）のブレイクポイントは無視され小さいサイズの画像が表示される。src属性は指定しても、してなくても動作する。

<img src="" class="js-image-set" data-image-set='["image_sp.jpg", "image_tb.jpg", "image_pc.jpg"]'>
<img src="" class="js-image-set" data-image-set='["image_sp.jpg", "", "image_pc.jpg"]'>
<img src="" class="js-image-set" data-image-set='["image_sp.jpg", "image_tb.jpg", ""]'>