JavaScript

2019.09.27

【jQuery】jQueryのみでPC/SPの画像を切り替える方法

画像をレスポンシブで切り替える場合に、
cssのメディアクエリを使い、display:none(block)で切り替えている場合が多いかと思いますが
jQueryを使えばhtml上にはPC用の画像のみを設置することで、CSSの記述が不要になります。

手順

①PC用の画像には「xxx-pc.jpg」と命名
SP用の画像には「xxx-sp.jpg」と命名

②PC版の画像のみマークアップし、「rwd」クラス名を付ける

<img src="hoge.jpg" class="rwd"/>

③jQueryに下記を入力する

//切り替えポイント
	var rwdPoint=768;

	function slideImgChange(){
		if($(window).width()<rwdPoint){
            $("img.rwd").each(function(){
				var changeImg = $(this).attr('src').replace('-pc.' , '-sp.');
				$(this).attr('src', changeImg);
			});
		}else{
			$("img.rwd").each(function(){
				var changeImg = $(this).attr('src').replace('-sp.' , '-pc.');
				$(this).attr('src', changeImg);
			});
		}
	}

	//読み込み時の処理
	slideImgChange()

    //リサイズ時の処理
    $(window).on('resize', function(event) {
    	event.preventDefault();
    	slideImgChange();
    });

ポイント

・画像のクラス名の”rwd”とjQuery内の
$("img.rwd")
を合わせる

・画像ファイル名の”-pc””-sp”とjQuery内の
var changeImg = $(this).attr('src').replace('-pc.' , '-sp.');
を合わせる

いかがでしたでしょうか。
ぜひご活用ください。

▼▽▼jQueryについての関連記事 ▼▽▼

関連記事

  • 2021.02.05

    【jQuery】複数の要素(divタグ、pタグなど)を取得して操作する方法【初心者向け】

    JavaScript

  • 2021.01.30

    【JavaScript】複数の要素(divタグ、pタグなど)を取得して操作する方法

    JavaScript

  • 2021.01.08

    【jQuery】jQueyでスマホ・PC判定をする

    JavaScript

おすすめ記事

  • 2020.12.19

    PowerPointで目次を簡単に作る方法【スライド内リンクを設定する方法も紹介】

    その他

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design