レスポンシブデザインでwebサイトを制作することが多くなってきていますが、
その中でスマホの場合を考えられてないケースが多々あります。

本来であればレスポンシブの構造上、スマホファーストで考えるべきところなのですが、
PC先行でデザインし、後でスマホをどうにかするってパターンになってしまっています。。。

そういった場合、
レスポンシブデザインはもちろん同じ一つのソースなので、
同じ画像ではダメなことがあります。

しっかりスマホファーストで考えていても、
PCは横長でスマホは縦長なので、
サイズを違うものにしたい場合もあると思います。

そんな時、PCとスマホで画像を切り替える必要があります。

元々htmlに両方書いておいて、
cssでdisplayをnoneやblockにするというあまり良くない方法もありますが、
今回はjQueryを使用した方法をご紹介します。

jQueryを使ってレスポンシブデザインでPCとスマホで画像を切替える方法

どういうものかというと、特に難しいことではなく、
windowのサイズを測って、設定したい数値以下であれば、
imgのパスを変えるというものです。

一応デモもあります。（大したデモじゃないです・・・）

 

DEMO

 

jQueryを読み込んで、
以下のソースを直書きか、別ファイルに記述して読み込ませます。

 

javascript

JavaScript

$(function(){ var wid = $(window).width(); if( wid < 480 ){ $('.imgChange').each(function(){ $(this).attr("src",$(this).attr("src").replace('_pc', '_sp')); }); } });

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

XHTML

<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>

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属性というものを使用します。

data属性とは？

html

XHTML

<li><img src="" alt="" class="imgChange2" data-img="img01_pc.jpg"></li>

1	<li><img src="" alt="" class="imgChange2" data-img="img01_pc.jpg"></li>

javascript

JavaScript

$(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")); }); } });

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")); }); } });

となります。

ちなみにデモの最後の画像はこちらの方法で設定しています。

とはいえ極力違う画像使うのは避けたいですね〜。
レスポンシブのメリットが損なわれてるわけですからね・・・