jQuery PR

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

記事内に商品プロモーションを含む場合があります

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

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

今回はJavaScriptを使用してHTML上では1つの記述で、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);
});

画像の名前について

切り替えたい画像の名前は必ず
PCで使用する場合「○○_pc.png」
SPで使用する場合「○○_sp.png」
としてください。
(いやだ!!って人は上記のJSの2行目、3行目を変更すると変更も可能です。)

ブレイクポイントについて

上記コードの4行目の数字を変更することでブレイクポイントを変更できます。
仕様に合わせて変更してください。

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。