最近では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でウィンドウサイズによって画像を切り替えるレスポンシブ対応が必要になった際に是非。。。