【レスポンシブ】jQueryを利用した画像切り替え

CSSのメディアクエリを使わずに、jQueryを利用してPC用の画像とスマホ用の画像を切り替えます。切り替え対象の画像にクラス名を付与することで簡単に設定可能です。

htmlのコードは下記になります。
切り替え対象の画像のimgタグにclass=”switch”を付与します。また、切り替え対象の画像はファイル名の最後に「_pc」を付けます。

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

jQueryのコードは下記になります。
画像切り替えを実行するブラウザの横幅は、変数replaceWidthで設定します。ユーザーのブラウザの横幅はparseIntで小数点以下を切り捨てて、変数windowWidthに格納します。そして、replaceWidthとwindowWidthの比較でPC用画像とスマホ用画像の出し分けをします。画像のimgタグのsrc属性をreplaceで置換することで画像ファイル名を切り替えています。なお、ウィンドウリサイズ時の画像切り替えは、setTimeoutを利用して0.2秒後に処理を実行しています。

$(function() {
	var elem = $('.switch');
	var sp = '_sp.';
	var pc = '_pc.';
	var replaceWidth = 600;

	function imageSwitch() {
		var windowWidth = parseInt($(window).width());
		$(elem).each(function() {
			var thisItem = $(this);
			if(windowWidth >= replaceWidth) {
				thisItem.attr('src', thisItem.attr('src').replace(sp, pc));
			} else {
				thisItem.attr('src', thisItem.attr('src').replace(pc, sp));
			}
		});
	}
	imageSwitch();

	var resizeTimer;
	$(window).resize(function() {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function() {
			imageSwitch();
		}, 200);
	});
});