imageSet.js

スクリプト

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

  function imageSet() {
    // 現在のウィンドウサイズを取得する。
    var windowWidth = parseInt(window.innerWidth);
    // 付与するsrc属性を初期化する。
    var setData = {};

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

      /**
       * @desc - 文字列の中から、空文字以外で最初に渡した文字列を返します。
       * @param {String} data - 文字列か空の文字列をカンマ区切りで渡します。
       * @example - checkData(["", "array2"]) => array2
       */
      function checkData(data) {
        var result = [];
        var len = data.length;
        // 文字列が空でない場合は配列に格納する。
        for(var i = 0; i < len; i++) {
          if(data[i]) {
            result.push(data[i]);
          }
          // 配列に1つ以上格納されたらfor文を終了する。
          if(result.length === 1) {
            break;
          }
        }
        // 配列の個数が0以外であれば、配列の1つ目の値を返す。
        if(result.length) {
          return result[0];
        } else {
          return false;
        }
      }

      // 768px以上1000px未満ではtb、なければspかpc
      if(windowWidth >= tb && windowWidth < pc) {
        setData = checkData($data[1], $data[0], $data[2]);
        // 1000px以上ではpc、なければtbかsp
      } else if(windowWidth >= pc) {
        setData = checkData($data[2], $data[1], $data[0]);
        // 768px未満ではsp、なければtbかpc
      } else {
        setData = checkData($data[0], $data[1], $data[2]);
      }
      // 取得したパスでsrc属性を書き換える。
      $this.attr('src', setData);
    });
  }
  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", ""]'>