レスポンシブでブレークポイント毎に画像を出し分ける

レスポンシブでブレークポイント毎で画像を出し分ける処理を実装してみます。

サンプルコード

出し分ける画像はdata属性で指定するようにします。

HTML

<img class="sample" data-imgsrc='["img/sp01.jpg", "img/tablet01.jpg", "img/pc01.jpg"]' />

スマホ用の画像を0～768、タブレット用の画像を769～980、PC用の画像を981～ で出し分けるようにします。

JavaScript

$(function() {
	var target = $('.sample');
	var srcArr = target.data('imgsrc');

	var currentNo; // 現在表示中の画像
	var latestNo; // 前回表示した画像
	var breakArr = [768, 980]; // ブレークポイント

	imageChange();
	$(window).on('resize', function() {
		imageChange()
	});

	// 画像変更の処理をする関数
	function imageChange() {
		// 現在表示する画像を調べる
		for (var i = 0; i < breakArr.length; i++) {
			if(window.matchMedia('(max-width: ' + breakArr[i] + 'px)').matches) {
				currentNo = i;
				break;
			}
			if(i >= breakArr.length - 1) {
				currentNo = i + 1;
			}
		}
		// 前回の変更から変わっている場合のみ
		if(currentNo !== latestNo) {
			target.attr('src', srcArr[i]);
			latestNo = currentNo;
		}
	}
});

matchMedia()を使用しているので、IE10以上での対応になります。
ブレークポイント毎で画像を出し分けのデモページ
　

プラグイン化

今のままだと汎用性がないので、プラグイン化してみます。
プラグイン化した「imgchange.js」はこちら

HTML

プラグインの設定はimgタグ毎ではなく、ブレークポイントの設定が同じ画像はまとめて指定できるようにしています。
下記の場合、sp/tablet/pcで出し分け、sp/pcで出し分け、sp/tablet/pc/wideで出し分けの3種類をそれぞれclassで指定しています。

<img class="sp_tb_pc" data-imgsrc='["img/sp01.jpg", "img/tablet01.jpg", "img/pc01.jpg"]' />
<img class="sp_tb_pc" data-imgsrc='["img/sp02.jpg", "img/tablet02.jpg", "img/pc02.jpg"]' />
<img class="sp_pc" data-imgsrc='["img/sp03.jpg", "img/pc03.jpg"]' />
<img class="sp_pc" data-imgsrc='["img/sp04.jpg", "img/pc04.jpg"]' />
<img class="sp_tb_pc_wide" data-imgsrc='["img/sp05.jpg", "img/tablet05.jpg", "img/pc05.jpg", "img/pc-wide05.jpg"]' />

imgchange.js

(function($) {
	$.fn.imgchange = function(options) {

		var elements = this;
		var defaults = {
			breakArr: [768, 980],
			dataName: 'imgsrc',
			delay: 200
		};
		var setting = $.extend(defaults, options);

		var currentNo; // 現在表示中の画像
		var latestNo; // 前回表示した画像

		imageChange();
		$(window).on('resize', function() {
			setTimeout(function() {
				imageChange();
			}, setting.delay);
		});

		// 画像変更の処理をする関数
		function imageChange() {
			// 現在表示する画像を調べる
			for (var i = 0; i < setting.breakArr.length; i++) {
				if(window.matchMedia('(max-width: ' + setting.breakArr[i] + 'px)').matches) {
					currentNo = i;
					break;
				}
				if(i >= setting.breakArr.length - 1) {
					currentNo = i + 1;
				}
			}

			// 前回の変更から変わっている場合のみ
			if(currentNo !== latestNo) {
				for (var i = 0; i < elements.length; i++) {
					var srcArr = elements.eq(i).data(setting.dataName);
					elements.eq(i).attr('src', srcArr[currentNo]);
				}
				latestNo = currentNo;
			}
		}
	}
})(jQuery);

JavaScript

$(function() {
	$('.sp_tb_pc').imgchange();
	$('.sp_pc').imgchange({
		breakArr: [640]
	});
	$('.sp_tb_pc_wide').imgchange({
		breakArr: [768, 980, 1200]
	});
});

オプションとして、ブレークポイントの指定、data属性の名前、リサイズ後の切り替えまでの時間を設定できるようにしています。
プラグイン化後のデモページ