レスポンシブイメージスウィッチャー

画面幅に応じて読み込み画像のファイル名末尾「_pc」「_sp」を付け替えるやつ

$(function () {
	var $elem = $('.switch');
	var sp = '_sp.';
	var pc = '_pc.';
	var replaceWidth = 767; //break point
	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);
	});
});

$(function () {

var $elem = $('.switch');

var sp = '_sp.';

var pc = '_pc.';

var replaceWidth = 767; //break point

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);

});

カテゴリー:JS

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

関連投稿

imgタグのsrcの一部をreplaceする

YouTube動画を画面いっぱいに背景として使用できるjqrueryプラグイン

右クリック禁止

imgタグのソースを画面幅に応じて変更する

トグルメニュー

開閉式のメニュー