レスポンシブでJavaScriptを使って簡単にPC,SPの画像を切り替える方法｜カケウェブ

レスポンシブでPCとスマホで画像を切り替えたいってときがありますよね。
HTMLだけ、HTML+CSSだけでもできますが、今回はJSを使って変更してみたいと思います。

HTMLだけで変更する場合は、「レスポンシブ画像切り替え方法！PC SPの切り替えとRetina対応する【HTMLのみで対応可】」を参考にしてください。

今回はJavaScriptを使用してHTML上では１つの記述で、classだけの追加で画像の切り替えを行えるようにします。

レスポンシブでJavaScriptを使って簡単にPC,SPの画像を切り替える方法

では早速コードはこちら。

var $elem = $('.sp_img');
var sp = '_sp.';
var pc = '_pc.';
var replaceWidth = 560; //ブレイクポイント指定

function imageSwitch() {
	var windowWidth = parseInt($(window).width()); //ウィンドウサイズ取得
	$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;
$(window).on('resize', function () {
clearTimeout(delayStart);
delayStart = setTimeout(function () {
imageSwitch();
}, delayTime);
});