imageProvide.js

スクリプト

• $imageProvideに処理の対象にする要素を指定
• tbとpcにブレイクポイントを指定
• data-image-provideカスタムデータ属性の指定が2つならtb、3つならtbとpcでそれぞれ画像が切り替わる

// @desc - カスタムデータ属性を取得して画像ファイルを切り替えます。
// @example html
// <img src="" class="js-image-provide" data-image-provide='["assets/image/title_sp.jpg", "assets/image/title_tb.jpg", "assets/image/title_pc.jpg"]'>
$(function() {
  // 処理の対象になる要素。
  var $imageProvide = $('.js-image-provide');
  // 画像ファイルを切り替えるウィンドウサイズ。
  var tb = 768;
  var pc = 1000;

  function imageProvide() {
    // ウィンドウサイズの取得
    var windowWidth = parseInt(window.innerWidth);
    // ブレイクポイントの初期化。
    var setData = {};

    $imageProvide.each(function() {
      var $this = $(this);
      // カスタムデータ属性とその個数を取得。
      $data = $this.data('image-provide');
      $dataCount = $data.length;

      // カスタムデータ属性が2つの場合は`tb`で切り替わる。
      if($dataCount === 2) {
        if(windowWidth >= tb) {
          setData = $data[1];
        } else {
          setData = $data[0];
        }
      }

      // カスタムデータ属性が2つの場合は`tb`と`pc`で切り替わる。
      if($dataCount === 3) {
        if(windowWidth >= tb && windowWidth < pc) {
          setData = $data[1];
        } else if(windowWidth >= pc) {
          setData = $data[2];
        } else {
          setData = $data[0];
        }
      }

      // 取得した`src`属性を付与する。
      $this.attr('src', setData);
    });
  }
  imageProvide();

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

デフォルトでは.js-image-provideが指定されていて、カスタムデータ属性が2つなら768px、3つなら768pxと1000pxで画像が切り替わる。

カスタムデータを配列で指定するためにはシングルクオーテーションと角括弧（ブラケット）で囲み、ファイル名はダブルクオーテーションで囲む。

<img src="" class="js-image-provide" data-image-provide='["assets/image/title_sp.jpg","assets/image/title_pc.jpg"]'>

<img src="" class="js-image-provide" data-image-provide='["assets/image/title_sp.jpg", "assets/image/title_tb.jpg", "assets/image/title_pc.jpg"]'>