JavaScriptで横幅によって画像を切り替える方法

公開日： 更新日：

JavaScript

PCの時、スマホの時、タブレットの時で画像を切替えたい時がありますよね。
CSSで「display:none;」と「display:block;」で切り替えもできますが、HTML上では２つimgタグが必要になります。
１つ２つなら大丈夫ですが、多くなってくると見るだけで嫌になりそうです。
そこで今回はJavascriptを使用し、横巾で画像を切り会える方法を紹介します。
今回はJavaScriptを使用することでHTML上では１つの記述で、classを追加するだけで専用の画像に切り換わるようにしていきます。

JavaScriptで横幅によって画像を切り替える方法

まずは今回の完成コード

[js]
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);
});
[/js]

画像に名前をつける

切り替えたい画像の名前は必ず
PCで使用する場合「○○_pc.png」
SPで使用する場合「○○_sp.png」
としてください。
○○の名前は
同一のものにしてください。

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

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

現状はPCとSPのみですが、if文を追加することでタブレットやもっと細かく設定可能です。

関連記事