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 - 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 convertData = [];

      // 768px以上1000px未満ではtb, sp, pcの優先順位で変数に格納する。
      if(windowWidth >= tb && windowWidth < pc) {
        convertData = convertIntoArray([$data[1], $data[0], $data[2]]);
        setData = selectData(convertData);

        // 1000px以上ではpc, tb, spの優先順位で変数に格納する。
      } else if(windowWidth >= pc) {
        convertData = convertIntoArray([$data[2], $data[1], $data[0]]);
        setData = selectData(convertData);

        // 768px未満ではsp, tb, pcの優先順位で変数に格納する。
      } else {
        convertData = convertIntoArray([$data[0], $data[1], $data[2]]);
        setData = selectData(convertData);
      }

      // 取得したパスで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", ""]'>