レスポンシブデザインでPCとスマホで画像を切替える方法
レスポンシブデザインでwebサイトを制作することが多くなってきていますが、
その中でスマホの場合を考えられてないケースが多々あります。
本来であればレスポンシブの構造上、スマホファーストで考えるべきところなのですが、
PC先行でデザインし、後でスマホをどうにかするってパターンになってしまっています。。。
そういった場合、
レスポンシブデザインはもちろん同じ一つのソースなので、
同じ画像ではダメなことがあります。
しっかりスマホファーストで考えていても、
PCは横長でスマホは縦長なので、
サイズを違うものにしたい場合もあると思います。
そんな時、PCとスマホで画像を切り替える必要があります。
元々htmlに両方書いておいて、
cssでdisplayをnoneやblockにするというあまり良くない方法もありますが、
今回はjQueryを使用した方法をご紹介します。
jQueryを使ってレスポンシブデザインでPCとスマホで画像を切替える方法
どういうものかというと、特に難しいことではなく、
windowのサイズを測って、設定したい数値以下であれば、
imgのパスを変えるというものです。
一応デモもあります。（大したデモじゃないです・・・）
jQueryを読み込んで、
以下のソースを直書きか、別ファイルに記述して読み込ませます。
javascript
|
1 2 3 4 5 6 7 8 | $(function(){ var wid = $(window).width(); if( wid < 480 ){ $('.imgChange').each(function(){ $(this).attr("src",$(this).attr("src").replace('_pc', '_sp')); }); } }); |
あとは以下のように変更させたいimgにclass「imgChange」を付けます。
html
|
1 2 3 4 5 6 | <ul> <li><img src="img01_pc.jpg" alt="" class="imgChange"></li> <li><img src="img02_pc.jpg" alt="" class="imgChange"></li> <li><img src="img03_pc.jpg" alt="" class="imgChange"></li> <li><img src="img04_pc.jpg" alt="" class="imgChange"></li> </ul> |
これだけで、「imgChange」とつけたものは、一括で変更されます。
一つ一つ変更したい場合は、eachを使わずに記述すればいいんですが、
画像切り替えたいものを一つ一つ書くのはめんどくさいので、
classをつけるだけで、変更される方が簡単ですよね。
ただ、これはスマホの場合、
PCとスマホの画像を読み込むので、ちょっとロードのパフォーマンスが落ちちゃう可能性があります。
二重に読み込ませない方法
この方法はもしかしたら他のことに影響あるかもしれませんし、ieとかで動かないかもしれませんが、
srcを空にして、data属性というものを使用します。
html
|
1 | <li><img src="" alt="" class="imgChange2" data-img="img01_pc.jpg"></li> |
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(function(){ var wid = $(window).width(); if( wid < 480 ){ $('.imgChange2').each(function(){ $(this).attr("src",$(this).data("img").replace('_pc', '_sp')); }); }else { $('.imgChange2').each(function(){ $(this).attr("src",$(this).data("img")); }); } }); |
となります。
ちなみにデモの最後の画像はこちらの方法で設定しています。
とはいえ極力違う画像使うのは避けたいですね〜。
レスポンシブのメリットが損なわれてるわけですからね・・・
Author Profile
スターフィールド編集部
SHARE
