レスポンシブで表示させる画像の切り替え

Question

javascriptにてレスポンシブで表示する画像を切り替えたく考えています。
いろいろ調べてみて下記のサイトを参考にしてみたのですがどうもうまく行かずに悩んでおります。
https://try-m.co.jp/blog/web-create/510/
スマホサイズの５５９pxまでとタブレットの５５９〜９５９px、PCサイズの９６０px以上の三つでサイズ調整がうまくいきません。
スクリプトもあまり詳しくないためどこを書き換えていいかがわからずにいます。
スマホではファイルの先頭をmb_、タブレットではtb_、パソコンではpc_に変えてレスポンシブで画像を変更できるような動きをするためにはどのようにすれば良いのでしょうか？
現状の動きですと、pcからtb_、mb_までのブラウザサイズ変更でそぞれ画像が切り替わるのですが、ブラウザサイズを戻した際に画像の切り替えができずどのサイズでもmb_のままになってしまいます。

説明が苦手で申し訳ありませんが、ご教授していただけると助かります。

<img src="pc_test" class="tb">

	jQuery(function ($) {
		$(window).on('load resize', function(){
 　
  var $windowWidth = window.innerWidth
  var $breakPointA = 560; //画像を差し替えを実行するウィンドウサイズ
  var $breakPointB = 959;
	var isMobileSize = ($windowWidth < $breakPointA);
	var isTabletSize = ($windowWidth <= $breakPointB) && ($windowWidth > $breakPointA);
	var isPcSize = ($windowWidth > $breakPointB);
 
  if (isTabletSize) {
 
    var before = 'pc_',
		before2 = 'mb_',
        after = 'tb_';
 
    replaceImg();
 
  } else if (isMobileSize) {
 
    var before = 'tb_',
		before2 = 'pc_',
        after = 'mb_';
 
    replaceImg();
 
  } else if (isPcSize) {
 
    var before = 'tb_',
		　　　before2 = 'mb_',
        after = 'pc_';
 
    replaceImg();
 
  }
 
  function replaceImg(){
    $('.tb[src*=pc_],.tb[src*=tb_],.tb[src*=mb_]').each(function(){
      var img = $(this).attr('src').replace(before, after);
      if( $(this).attr('src').match(before,before2) ) {
        $(this).attr('src', img);
      }
    });
  }
 
})
		});

下記のコードの通り条件分岐を追加したらリサイズはうまくいくようになったのですが、画面幅を変えた時にしかスクリプトが動かずにいます。
load resizeをつけているのですがどこが間違っているのかわからずにいます。

	jQuery(function ($) {
		$(window).on('load resize', function(){
 　
  var $windowWidth = window.innerWidth
  var $breakPointA = 560; //画像を差し替えを実行するウィンドウサイズ
  var $breakPointB = 959;
	var isMobileSize = ($windowWidth < $breakPointA);
	var isTabletSize = ($windowWidth <= $breakPointB) && ($windowWidth > $breakPointA);
	var isPcSize = ($windowWidth > $breakPointB);
 
  if (isTabletSize) {
 
    var before = 'pc_',
		before2 = 'mb_',
        after = 'tb_';
 
    replaceImg();
 
  } else if (isMobileSize) {
 
    var before = 'tb_',
		before2 = 'tb_',
        after = 'mb_';
 
    replaceImg();
 
  } else if (isPcSize) {
 
    var before = 'tb_',
		　　　before2 = 'mb_',
        after = 'pc_';
 
    replaceImg();
 
  }
 
  function replaceImg(){
    $('.tb[src*=pc_],.tb[src*=tb_],.tb[src*=mb_]').each(function(){
      var img = $(this).attr('src').replace(before, after);
		var img2 = $(this).attr('src').replace(before2, after);
      if( $(this).attr('src').match(before) ) {
        $(this).attr('src', img);
      }
		else if( $(this).attr('src').match(before2) ) {
        $(this).attr('src', img2);
      }
    });
  }
 
})
		});

Comments

[CHERRY]

Web ブラウザのデベロッパーツールなどで、JavaScript のエラーが出ていたりしないですか？

また、うまくいきませんでは、状況がわかりませんので、具体的な状況を詳しく説明していただけないでしょうか？
文章での説明が難しいようであれば、HTMLのソースコードやスクリーンキャプチャを添付して、この部分がおかしい等がわかるように記載していただけないでしょうか？

[nakajima4]

javaScriptのエラーは特になく、ブラウザ幅の可変でリサイズはできるようになったのですが、ブラウザを開いた際にモバイルとタブレット両方の幅でも初期表示のpc_の画像が表示されてブラウザの可変をし直さないと切り替えができない状態にいます。

Answer 1

私なら、JSでやらずにCSSで対応します。

<img src="pc_foo.png" class="pc_only">
<img src="tb_foo.png" class="tb_only">
<img src="mb_foo.png" class="mb_only">

.tb_only {display:none;}
.mb_only {display:none;}

@media screen and (max-width:959px) {
 .pc_only {display:none;}
 .tb_only {display:block;}
}
@media screen and (max-width:559px) {
 .tb_only {display:none;}
 .mb_only {display: block;}
}

これで各ディスプレイサイズでによって改行位置を替える、なども、このクラスをつけることで対応できます。

Comments

[nakajima4]

display:noneだとブラウザの読み込未速度に影響など出たりしますか？
またpicture要素を使う場合対応ブラウザにIEが含まれていませんでしたのでjsでと考えていました。

[m_o]

JSで毎回処理をするより、単純に画像を表示非表示するだけなので、ラグもなく速度は速く感じます。
まだIEは無視できませんので、普通にimgタグで使用します。
もちろん、imgタグに直接クラスではなく、それを囲むブロックを**_onlyクラスで管理するのでも良いです。

メディアクエリを使ったレスポンシブ対応はCSSです。

```html
<p><img src="pc_foo.png" class="pc_only"><img src="tb_foo.png" class="tb_only"><img src="mb_foo.png" class="mb_only"></p>
```

どうしてもJSでimgのsrc内を切り替えたい場合は、
beforeを取得せず、srcの頭の3文字をそのブラウザサイズのに適切な文字列にしたほうが、処理が速いと思います。
String.prototype.substring()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/string/substring

[nakajima4]

display:noneで上手く切り替えができました。なおかつjsで処理するより速いとのことでまたひとつ勉強になりました。
ありがとうございます。