WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

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

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

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

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

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

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

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

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

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

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

[html]
◆HTML


[/html]

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

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

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

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

そしてCSSは以下。

[css]
◆CSS
.switch {
visibility: hidden;
}
[/css]

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

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

[javascript]


[/javascript]

スクリプト開始部分にある
——————————————————
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でウィンドウサイズによって画像を切り替えるレスポンシブ対応が必要になった際に是非。。。

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

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

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

  • 2013年7月9日 @ 3:25 PM
    パーマリンク

    Black Flag様

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

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

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

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

    返信
  • 2013年7月11日 @ 12:37 AM
    パーマリンク

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

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

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

    返信
  • 2013年7月11日 @ 10:05 AM
    パーマリンク

    Black Flag様

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

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

    返信
  • 2013年7月12日 @ 12:49 AM
    パーマリンク

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

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

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

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

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

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

    返信
  • 2013年7月12日 @ 7:56 AM
    パーマリンク

    Black Flag様

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

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

    返信
  • 2013年7月13日 @ 1:16 PM
    パーマリンク

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

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

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

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

    返信
  • 2013年8月2日 @ 8:36 PM
    パーマリンク

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

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

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

    返信
  • 2013年8月4日 @ 12:59 AM
    パーマリンク

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

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

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

    よろしくお願いします。

    返信
  • ピンバック: レスポンシブWEBデザイン製作に役立つ厳選まとめ

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

  • 2014年4月11日 @ 5:23 PM
    パーマリンク

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

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

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

    返信
  • 2014年4月13日 @ 12:53 PM
    パーマリンク

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

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

    よろしくお願いします。

    返信
  • ピンバック: めもたんスニペット

  • ピンバック: 画面サイズによる、画像の切り替え | めもたんスニペット

  • 2015年4月3日 @ 7:51 PM
    パーマリンク

    Black Flag 様

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

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

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

    返信
  • 2015年4月4日 @ 11:25 AM
    パーマリンク

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

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

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

    返信
  • 2016年5月19日 @ 11:09 AM
    パーマリンク

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

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

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

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

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

    返信
  • 2016年5月22日 @ 10:48 AM
    パーマリンク

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

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

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

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

    よろしくお願いします。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です