imageSet.js

カスタムデータ属性を使用したレスポンシブイメージのスクリプトです。

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

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

変数としてtbとpcを指定します。デフォルトでは0767px、768px999px、1000px以上の3箇所で画像が切り替わります。

$(function() {

  function imageSet() {
    // 処理の対象になる要素をカスタムデータ属性から取得。
    var $imageSet = $('[data-image-set]');
    // ブレイクポイントを2箇所指定する。
    var tb = 768;
    var pc = 1000;
    // 現在のウィンドウサイズを取得する。
    var windowWidth = window.innerWidth;

    $imageSet.each(function() {
      var $this = $(this);
      // カスタムデータ属性からURLを配列で取得し、変数に格納する。
      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秒経ってから処理を実行する。
  $(window).on('resize', debounce(function() {
    imageSet();
  }, 200));
});