最近ではWebサイトを構築する際にレスポンシブ対応として、PCでの表示のみならずスマートフォンやタブレットでの表示を考慮して構成する必要があります。

レスポンシブ対応でレイアウトに関してはCSSのMediaQueriesを使ったりすることで、ウィンドウサイズによって画面上のレイアウトを調整させたりすることが可能ですが、大きな画像を使用する画面デザインなどの場合ではスマートフォンで表示する際のレンダリング負荷が問題になったりします。

そんな際に使えるようにMediaQueriesと同様の方法で、ウィンドウサイズによって読み込む画像を切り替える動作をjQueryを使って実験的に作ってみたので紹介してみます。

【2016/05/22】 ウィンドウサイズを取得して画像を切り替える部分のスクリプト動作を一部改修しました。

jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験

ウィンドウサイズによって切り替える画像については、PCで表示させる為の大きな画像と、スマートフォンなどで表示させる為の小さい画像に対して画像ファイル名に命名規則を付ける必要があります。

今回のサンプルではPC向けの画像にはファイル名に「_pc」と付け、スマートフォン向けの画像には「_sp」と付けるようにしてあります。
(判別させる名前部分は変更可能です)

まずは動作のサンプルから。
下記リンクよりサンプル画面を表示してみてください。(別枠で表示されます)

jQueryでレスポンシブ対応の際にウィンドウサイズによって表示する画像を切り替える実験サンプルを別枠で表示※ブラウザ枠をリサイズすることで表示する画像が切り替わります。

この動作の全体構成についてHTMLから。

◆HTML
<img src="img/photo01_sp.jpg" alt="" class="switch">
<img src="img/photo02_sp.jpg" alt="" class="switch">

ウィンドウサイズによって表示の切り替え対象とする画像に対して、任意のクラス名(サンプルでは「switch」)をつけます。

HTMLソース上ではスマートフォン向けに表示させる画像へのパスを記述しておきます。

今回のサンプルでは画像ファイル名は
——————————————————
◆PC向け
photo01_pc.jpg / photo02_pc.jpg

◆スマートフォン向け
photo01_sp.jpg / photo02_sp.jpg
——————————————————
としてあり、それぞれのファイル名の「_pc」と「_sp」の部分が切り替わるようになります。

そしてCSSは以下。

◆CSS
.switch {
	visibility: hidden;
}

表示を切り替える画像は念の為、ひとまず「visibility: hidden」で非表示にしておきます。

そして実際にウィンドウサイズによって、画像を切り替えるスクリプトは以下の様になります。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
	var $setElem = $('.switch'),
	pcName = '_pc',
	spName = '_sp',
	replaceWidth = 641;

	$setElem.each(function(){
		var $this = $(this);
		function imgSize(){
			if(window.innerWidth > replaceWidth) {
				$this.attr('src',$this.attr('src').replace(spName,pcName)).css({visibility:'visible'});
			} else {
				$this.attr('src',$this.attr('src').replace(pcName,spName)).css({visibility:'visible'});
			}
		}
		$(window).resize(function(){imgSize();});
		imgSize();
	});
});
</script>

スクリプト開始部分にある
——————————————————
var $setElem = $(‘.switch’),
pcName = ‘_pc’,
spName = ‘_sp’,
replaceWidth = 641;
——————————————————
は上から
——————————————————
・切り替え対象とするCSSクラス名
・PC向けに画像のファイル名(一部)
・スマートフォン向けに画像のファイル名(一部)
・切り替えを実行させるウィンドウサイズの値
——————————————————
となっているので、これらの値を変更することでもろもろ調整が可能です。

「replaceWidth」で設定している値を対象にウィンドウサイズがそれ以上だったら画像ファイル名「_pc」が付いているものを表示し、それ以下だったら画像ファイル名「_sp」が付いているものを表示します。

HTMLソースには始めにスマートフォン向けの画像を記述しておくことで、スマートフォン側でPC向け画像が読み込まれるのを防いでいます。

「replaceWidth」の値はサンプルでは「641」としてありますが、iPhoneを基準としているので、もっと解像度の高いAndroid端末を対象にするには、ここの値はもう少し大きくしておく必要もあります。

サンプルでは切り替え対象となるものにCSSクラスを付けて判断していますが、「$setElem」の部分を「$(‘img’)」とすることでWebページ上の全ての画像を切り替え対象にすることも可能です。

ウィンドウサイズによって読み込む画像を切り替える方法はjQueryプラグインでも多々出てきていますが、この様に画像に命名規則を付けることで切り替えを簡単に実装することができそうです。

jQueryでウィンドウサイズによって画像を切り替えるレスポンシブ対応が必要になった際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

SHARE

Comments (19)

  • 横幅をグリグリして知る、レスポンシブWEBデザイン +おまけつき « お直し.com ブログ | 2012.10.10 10:14

    […] Thanks BlackFlag – jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験   […]

  • a_kurokawa | 2013.07.09 15:25

    Black Flag様

    いつもこちらのページにはわかりやすく、しかも欲しい内容がタイムリーに出てきますので本当にお世話になっております。

    今回、もしよろしければ教えていただきたいのですが、
    「レスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える~」の切り替える画像を、
    2つから3つにする場合はどのようにスクリプトを書き替えたら良いのでしょうか?

    実は、「3ステップでしっかり学ぶJavaScript」なる本も買っていろいろ試してみたのですが、
    どうやら私にはまだまだスキル不足なようです・・。
    もしよろしければ教えていただけると本当に助かります。

    よろしくお願いいたします。

  • BlackFlag | 2013.07.11 0:37

    >a_kurokawaさん
    コメントありがとうございます。
    この画像切り替えスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    当スクリプトでは切り替える画像は
    画像ファイル名を判別して処理しておりますので
    切り替える画像を増やす場合はスクリプトは変更する必要はなく
    HTML上に命名規則を保った形で画像を追加していただければ
    動作する仕組みになっております。

    お試しください。
    よろしくお願いします。

  • a_kurokawa | 2013.07.11 10:05

    Black Flag様

    ご返信いただきありがとうございます。
    私の質問の仕方が悪かったのですが、切り替えるベース画像(?)を増やすのではなくて、
    たとえばPC用とSP用のほかにもう1つタブレット用とか、
    「切り替えを実行させるウィンドウサイズの値」を増やしたい時はどこをどうすればよいのか・・。

    私の質問の仕方が悪かったので、お手数をおかけして本当に申し訳ございません。。
    ご多忙とは存知あげますが、再度ご返事いただければ本気で助かります。
    よろしくお願いいたします。

  • BlackFlag | 2013.07.12 0:49

    >a_kurokawaさん
    切り替えパターンを増やすということだったんですね。
    失礼致しました。

    確かにその様なPC/TABLET/SPといった
    3パターンでの画像切り替えは必要そうですね。

    pcとspの中間のサイズをtbとして
    切り替えるファイル名を3パターンにして
    切り替わるタイミングのウィンドウサイズを
    2パターンにしたサンプルを用意してみましたので
    下記URLよりダウンロードしてみてください。

    https://black-flag.net/devel/jQueryResponsiveImgSwitch/jQueryResponsiveImgSwitch3.zip

    ファイル名の部分「_pc」と「_tb」と「_sp」を
    ウィンドウサイズ「641px」「321px」で切り替えるパターンになっています。

    お試しください。
    よろしくお願いします。

  • a_kurokawa | 2013.07.12 7:56

    Black Flag様

    ご返信いただきありがとうございます。
    さっそくいただいたスクリプトを組み込んだところ、見事に見事に上手く動きました。
    本当にありがとうございます。

    私自身もっと勉強しなくてはと思う日々ですが、
    そう思えるのも、「こんなのが欲しかった」を次々と見せていただけるBlack Flag様のページがあるからこそです。
    今回は本当に助かりました。ありがとうございました。
    これからもよろしくお願いいたします。

  • BlackFlag | 2013.07.13 13:16

    >a_kurokawaさん
    無事に理想の動作が実装できた様で
    安心致しました。

    その様なお言葉をいただけるととても励みになります。
    ありがとうございます。
    自分もまだまだ勉強中の身ですが

    これからももっと皆さまに有意義な情報を発信できるよう
    精進させていただきます。

    今後ともよろしくお願いします。

  • dna180 | 2013.08.02 20:36

    このページは本当に、いつも助けられています。
    モバイルとPCで画像が差し替わるのは本当に願っていた機能ですので本当に助かります。

    ただ1点、要望といいますか
    をボタンにしたい時に、例えば「-over」をファイル名に記述していると
    「-sp」のときはマウスオーバーで「-sp-over」が
    「-pc」のときには、マウスオーバーで「-pc-over」が読み込まれるようになっていると
    レスポンシブなボタンでも使えるのにと思った次第です。

    今後のご活躍を期待しております。

  • BlackFlag | 2013.08.04 0:59

    >dna180さん
    コメントありがとうございます。
    この画像切り替えスクリプトをご活用いただいている様で
    嬉しく思っております。

    レスポンシブで画像を切り替えた際
    ロールオーバーで再度画像を切り替えるには
    「smartRollover.js」の様な
    ファイル名を切り替えるスクリプトと併用して
    ファイル名を「_sp_off」と「_sp_on」、「_pc_off」と「_pc_on」といった
    4種類のファイルを使用する構成で
    実現できるのではないかと考えております。
    (実際に試してはいないのですが・・・)
    http://css-happylife.com/archives/2007/0621_0010.php

    また何かご意見等ございましたら
    ご連絡くださいませ。

    よろしくお願いします。

  • レスポンシブWEBデザイン製作に役立つ厳選まとめ | 2013.09.25 10:00

    […] ウィンドウサイズによって読み込む画像を切り替える実験 […]

  • いま一度知っておきたい!レスポンシブなサイトを制作するときに意識したい基本項目7つ | 2014.03.12 12:01

    […] ィンドウサイズによって読み込む画像を切り替える実験 https://black-flag.net/jquery/20120808-4047.html […]

  • taroro | 2014.04.11 17:23

    ずっと悪戦苦闘していましたが、このページを見つけて簡単に解決しました。

    本当に助かりました。
    有り難うございました。

    今後のご活躍を期待しております。
    ちょくちょくチェックします。

  • BlackFlag | 2014.04.13 12:53

    >taroroさん
    コメントありがとうございます。
    この画像切り替えスクリプトがお役に立ったようで
    嬉しく思っております。

    他にもWeb制作に役立てていただける様、
    サンプルを紹介させていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。

  • めもたんスニペット | 2014.04.14 15:46

    […] によって読み込む画像を切り替える実験 | BlackFlaghttps://black-flag.net/jquery/20120808-4047.html […]

  • 画面サイズによる、画像の切り替え | めもたんスニペット | 2014.04.14 15:47

    […] によって読み込む画像を切り替える実験 | BlackFlaghttps://black-flag.net/jquery/20120808-4047.html […]

  • tomomi | 2015.04.03 19:51

    Black Flag 様

    いつも大変お世話になっております。
    JQueryプラグインを探す際は、まずここからチェックしてしまうくらいいつも参考にさせていただいております。

    こちらのプラグインについて1点質問させてください!><
    どうしてもブラウザによって若干のブレイクポイントのズレがしょうじてしまうのですが、解決方法はありませんでしょうか?
    サファリとその他のブラウザのブレイクポイントがずれてしまいます。

    できれば使いやすいのでこのままいきたいのですが、もしすぐ解決できる問題でしたらご教授いただけないでしょうか。
    お忙しいところ大変恐れ入りますが、どうぞよろしくお願いいたします。

  • BlackFlag | 2015.04.04 11:25

    >tomomiさん
    コメントありがとうございます。
    当記事の画像切り替えスクリプトをご検証いただいている様で
    嬉しく思っております。

    ご質問いただいた件について
    ちょっと検証できる環境がなく確認できていないのですが
    スクリプト12行目にある
    「$(window).width();」を「$(window).outerWidth();」に
    変更してみても変わらないでしょうか。

    お試しください。
    よろしくお願いします。

  • satesate | 2016.05.19 11:09

    BlackFlag 様のサイトには、いつも助けられており、大変ありがたく思っております。

    今回もレスポンシブデザインでの画像の変更にこちらのスクリプトを利用させて頂きました。
    さて、その際に上記の方が質問されているような、ブレークポイントのズレが生じてしまい、困っておりましたが、
    var windowWidth = parseInt($(window).Width()); 
    ↑の部分を
    var windowWidth = window.innerWidth ? window.innerWidth: $(window).width();
    ↑と変更することで解決できました。

    (私の条件下では・・・上記の質問にお答えになっている「$(window).outerWidth();」への変更では、上手く行きませんでした。)

    おせっかいかと思いましたが、取り敢えず、ご報告という意味でコメントさせて頂きました。

    これからもどうかよろしくお願いいたします。ありがとうございました!

  • BlackFlag | 2016.05.22 10:48

    >satesateさん
    コメントありがとうございます。
    当記事の画像切り替えスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご指摘いただいた件についてですが
    当ブログ別記事の
    ————————–
    ・ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い
    https://black-flag.net/jquery/20151117-5810.html
    ————————–
    こちらの記事公開後、
    この画像切り替えスクリプトの記事も
    修正しようと思いながらそのままの状態でした…

    ご指摘いただいた点ふまえ
    記事とサンプルスクリプトを修正させて頂きました。
    ありがとうございます。

    また何かありましたら
    お知らせいただけると幸いです。

    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して