JavaScript

2021.04.05

【簡単レスポンシブ対応】jQueryのみでPC/SP(スマートフォン)の画像を切り替える方法

画像をレスポンシブで切り替える場合に、cssのメディアクエリを使い、display:none(block)で切り替えている場合が多いかと思います。

しかしjQueryを使えば、CSSの記述が不要になります。

以下Codepenの幅を変えていただくと、空の画像が切り替わります(Result画面のみにしてみたり、HTMLやJSなどの言語タブを表示したりしてみてください)。

見づらい場合は、右上の「EDIT ON CODEPEN」をクリックするとCodepenの編集ページに飛ぶことができます。

See the Pen 【jQuery】PCとSPで画像切替 by spiqa design (@spiqa_design) on CodePen.

手順・解説

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

今回は「sky-pc.jpg」と「sky-sp.jpg」として、PCとスマホで夕空と青空を切り替えます。

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

<img class="rwd" src="https://note.spiqa.design/wp-content/uploads/2021/04/sky-pc.jpg" />

③JSに下記を入力する

//切り替えポイント
	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.09.28

    読み込みが終わったら処理!onloadイベントの使い方と注意点について解説【JavaScript】

    JavaScript

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

おすすめ記事

  • 2021.08.24

    現場で使える!WordPressおすすめ書籍(書評)

    WordPress

  • 2021.09.14

    【薄くて軽い!】超おすすめパソコンスタンド

    その他

  • 2021.08.11

    初心者必見!最初に読んでおきたいgoogleアナリティクスのおすすめ書籍

    その他

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!