レスポンシブイメージjs

スマホ⇔PCで画像を切り替えるレスポンシブイメージjsです。
htmlはモバイルファーストなので、sp→pc時のみsrcを置換。
逆はリロードし表示リセットすることで簡略化しました。
画像置換処理が完了するまではローディング画面を表示します。
sp/pcでリンク先が異なる場合のhref置換処理も入れています。

課題：pc表示時、srcに直接記述されているsp画像読み込み後に置換されたpc画像読み込む二重読み込み問題を修正してパフォーマンス改善したい。

```ruby:sample
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
img {
  max-width: 100%;
  height: auto;
}
p {
  text-align: center;
}
/* page loading (jsと連動)*/
body::before {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  height: 100vh;
  background: #fff;
  opacity: 1;
}
@keyframes endLoading {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
body::after {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  border: 4px solid #005BAC;
  border-left-color: transparent;
  -webkit-animation: isLoading 1s infinite linear;
  animation: isLoading 1s infinite linear;
}
@-webkit-keyframes isLoading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes isLoading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
body:not(.is-loading)::before,
body:not(.is-loading)::after {
  pointer-events: none;
  -webkit-animation: endLoading 0.5s linear forwards;
  animation: endLoading 0.5s linear 0s forwards;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
'use strict';
var isSpWidth = window.matchMedia('(max-width: 767px)');
var isPcWidth = window.matchMedia('(min-width: 768px)');
if(isPcWidth.matches) {// show loading
    document.write('<style type="text/css" id="stylePageLoading">body::before,body::after{content:"";}</style>');
}
document.addEventListener('DOMContentLoaded', function() {
    var isDevice = 0; // sp:0,pc:1
    changeResponsiveDisp();

    window.addEventListener('resize', function (event) {
        if( (isSpWidth.matches && isDevice != 0) || (isPcWidth.matches && isDevice != 1) ) {
            location.href = location.href.split('#')[0]; // デバイス変更されたらリロード
        }
    });

    function changeResponsiveDisp() {
        var $elem = $('[data-responsive]');
        if(isPcWidth.matches && isDevice != 1) { // pc表示へ
            isDevice = 1;
          for(var i=0; i<$elem.length; i++) {
              var $this = $elem.eq(i);
              if($this.data('responsive')) { // data-responsive 値あり (secまたはhrefをdata値に置換)
                  if($this[0].tagName == 'IMG') {
                      $this.attr('src',$this.data('responsive'));
                  }
                  if($this[0].tagName == 'A') {
                      $this.attr('href',$this.data('responsive'));
                  }
              } else { // data-responsive 値なし( hoge-sp.png を hoge-pc.png に置換 )
                  if($this[0].tagName == 'IMG' && $this.attr('src').indexOf('-sp.')) {
                      $this.attr('src', $this.attr('src').replace('-sp.','-pc.'));
                  }
              }
              if( i == $elem.length - 1 ){
                  endLoading();
              }
          }
        }
    }

    // end loading
    function endLoading() {
        $('body').removeClass('is-loading');
        setTimeout(function() {
          $('#stylePageLoading').remove();
        }, 1000);
    }
    setTimeout(function() {
      if($('body.is-loading').length) {
        endLoading();
      }
    }, 3000);
});
</script>
</head>
<body class="is-loading">
<p><a href="./hoge/sp/" data-responsive="./hoge/"><img src="./images/dummy-640x853.png" data-responsive="./images/dummy-768x576.png" alt="hoge"></a></p>
<p><img src="./images/dummy-sp.png" data-responsive alt="fuga"></p>
</body>
</html>
```