【レスポンシブ】JavaScriptのwindow.matchMediaメソッドを利用した画像切り替え

JavaScriptのwindow.matchMediaメソッドを利用してPC用の画像とスマホ用の画像を切り替えます。画面リサイズ時はブレークポイントでのみ処理が発生し、windowのresizeイベントを監視する必要がありません。

htmlのコードは下記になります。切り替え対象の画像はファイル名の最後に「_pc」を付けます。

<div class="main-img"><img src="responsive_pc.jpg" alt=""></div>

JavaScriptのコードは下記になります。画像ファイル名の切り替えはjQueryを利用しています。
ページ読み込み時は関数matchFuncを一度実行して、メディアクエリに応じた画像を表示させます。documentオブジェクトで発生するDOMContentLoadedイベント（DOM構築）時の実行になります。
addEventListenerメソッドでイベントリスナー（イベントに合わせて実行させる関数）を登録します。画面リサイズ時はMediaQueryListオブジェクトのaddListenerメソッドを利用して、メディアクエリの値がtrueかfalseに変化するタイミングで関数matchFuncを実行します。

function matchFunc(){
	if(window.matchMedia("(max-width:600px)").matches){
		$('.main-img img').each(function(index, elm){
			var item = $(elm);
			item.attr('src', item.attr('src').replace('_pc', '_sp'));
		})
	}
	if(window.matchMedia("(min-width:601px)").matches){
		$('.main-img img').each(function(index, elm){
			var item = $(elm);
			item.attr('src', item.attr('src').replace('_sp', '_pc'));
		})
	}
}
//読み込み時
document.addEventListener("DOMContentLoaded", matchFunc);
//リサイズ時
window.matchMedia("(max-width:600px)").addListener(matchFunc);