https://www.tenrikyo.or.jp/yoboku/wp-content/themes/tenrikyo/js/js-image-switch.js

1$(function() {
2  // 置換の対象とするclass属性。
3  var $elem = $('.js-image-switch');
4  // 置換の対象とするsrc属性の末尾の文字列。
5  var sp = '_sp.';
6  var pc = '_pc.';
7  // 画像を切り替えるウィンドウサイズ。
8  var replaceWidth = 768;
9
10  function imageSwitch() {
11    // ウィンドウサイズを取得する。
12    var windowWidth = parseInt($(window).width());
13
14    // ページ内にあるすべての`.js-image-switch`に適応される。
15    $elem.each(function() {
16      var $this = $(this);
17      // ウィンドウサイズが768px以上であれば_spを_pcに置換する。
18      if(windowWidth >= replaceWidth) {
19        $this.attr('src', $this.attr('src').replace(sp, pc));
20
21      // ウィンドウサイズが768px未満であれば_pcを_spに置換する。
22      } else {
23        $this.attr('src', $this.attr('src').replace(pc, sp));
24      }
25    });
26  }
27  imageSwitch();
28
29  // 動的なリサイズは操作後0.2秒経ってから処理を実行する。
30  var resizeTimer;
31  $(window).on('resize', function() {
32    clearTimeout(resizeTimer);
33    resizeTimer = setTimeout(function() {
34      imageSwitch();
35    }, 200);
36  });
37});