レスポンシブ【JSで画像切り替え】／「display:none」で切り替えたくないときに

備忘。
「display:none」で切り替えたくないときに。

これならばページを開いたタイミングで全ての画像を読み込まないため、軽量化できる。

やり方

class="switch"が記述されている画像のみ切り替わります。

<img src="images/text_sp.png" alt="スマホ切り替え" class="switch">

1	<img src="images/text_sp.png" alt="スマホ切り替え" class="switch">

/*===========================================================
レスポンシブ時の画像切り替え
=============================================================*/
// <img src>の[_pc]または[_sp]を判定し、ブレイクポイントに応じて画像を切り替える。
$(function () {
	//変数セット
	var $elem = $('.switch');
	var sp = '_sp.';
	var pc = '_pc.';
	var replaceWidth = 361; //ブレイクポイント設定

	function imageSwitch() {
		//ウィンドウサイズ取得
		var windowWidth = parseInt($(window).width());
		//.switchに適用
		$elem.each(function () {
			var $this = $(this);
			if (windowWidth >= replaceWidth) {
				$this.attr('src', $this.attr('src').replace(sp, pc));
			} else {
				$this.attr('src', $this.attr('src').replace(pc, sp));
			}
		});
	}
	imageSwitch();

	//ディレイ設定(リサイズの実行タイミングを遅延させる)
	var delayStart;
	var delayTime = 200; //ミリSec
	$(window).on('resize', function () {
		clearTimeout(delayStart);
		delayStart = setTimeout(function () {
			imageSwitch();
		}, delayTime);
	});
});