Blog

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

2013.08.06Cat:jQuery デザイナー

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

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

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

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

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

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

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

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

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

 

DEMO

 

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

 

javascript

 

あとは以下のように変更させたいimgにclass「imgChange」を付けます。

 

html

 

これだけで、「imgChange」とつけたものは、一括で変更されます。

 

一つ一つ変更したい場合は、eachを使わずに記述すればいいんですが、
画像切り替えたいものを一つ一つ書くのはめんどくさいので、
classをつけるだけで、変更される方が簡単ですよね。

ただ、これはスマホの場合、
PCとスマホの画像を読み込むので、ちょっとロードのパフォーマンスが落ちちゃう可能性があります。

 

二重に読み込ませない方法

この方法はもしかしたら他のことに影響あるかもしれませんし、ieとかで動かないかもしれませんが、
srcを空にして、data属性というものを使用します。

data属性とは?

html


javascript

となります。

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

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

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ