PCの時、スマホの時、タブレットの時で画像を切替えたい時がありますよね。
CSSで「display:none;」と「display:block;」で切り替えもできますが、HTML上では2つimgタグが必要になります。
1つ2つなら大丈夫ですが、多くなってくると見るだけで嫌になりそうです。
そこで今回はJavascriptを使用し、横巾で画像を切り会える方法を紹介します。
今回はJavaScriptを使用することでHTML上では1つの記述で、classを追加するだけで専用の画像に切り換わるようにしていきます。
JavaScriptで横幅によって画像を切り替える方法
まずは今回の完成コード
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」
としてください。
○○の名前は
同一のものにしてください。
ブレイクポイントについて
4行目の数字を変更することでブレイクポイントを変更できます。
仕様に合わせて変更してください。
現状はPCとSPのみですが、if文を追加することでタブレットやもっと細かく設定可能です。
コメント