レスポンシブで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