DETAIL NOTE

INTUITION DETAIL DESIGN BLOG

ウィンドウサイズによって画像を切り替える

レスポンシブWebデザインではおもにウィンドウサイズによってレイアウトを変更していきますが、画像はHTMLとCSSだけでは最適化するのが難しいです。

backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。また、srcset属性を使えばウィンドウサイズや解像度によって画像を切り替えることができますが、IEはまったく対応していないので専用のプラグインを読み込む必要があります。

そこで使用しているのが、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。

ウィンドウサイズを検知して画像ファイル名を置換

まずはPC用とスマホ用の画像を2種類用意して、画像ファイルの末尾に_spと_pcをつけます。

HTML側は.switchのついているimg要素のファイル名を以下のように変更して表示を切り替えていきます(ここでは仮に640pxとします)。.switchにはCSSでスタイルを指定せず、jQueryで要素を特定する目的だけに使用します。

マークアップ時には_spのほうを記述しておきます。

 

スクリプトは以下のようになります。

 

解説

スクリプトの処理

  1. ウィンドウサイズを取得して、それに応じて処理を開始
  2. attr()でsrc属性値を取得する
  3. replace()でファイル名の末尾を置換する
  4. ウィンドウサイズが変更されたら、そのたびに処理を実行する

以下の変数は案件に応じて変更

  • $elem は画像の切り替えを適応する要素
  • sp は狭い幅(スマホなど)で使用するファイル名のキーワード
  • pc は広い幅(PCなど)で使用するファイル名のキーワード
  • replaceWidth は画像を切り替えるウィンドウサイズ(px)

 

置換対象とするファイル名のキーワードは_sp.のようにしてドットを加えています。簡易的ですが、これで_specialのようなファイル名まで置換されてしまうのを防いでいます。.switchを指定していると、置換はされませんが処理自体は実行されてしまうので、必要なければclass属性は外してください。

リサイズ時の処理はdebounceというJavaScriptのパターンを使用して、処理を実行するまでのタイミングを遅らせています。この場合はリサイズが終わって0.2秒経ったときに処理を実行します。画像を多く使用しているページでは特に有効だと思います。

 

末尾に_spをつけるといった画像の命名規則に気をつける必要がありますが、比較的簡単に画像のレスポンシブ化ができる方法だと思います。

 

 

 

 

次へ 投稿

前へ 投稿

© 2024 INTUITION DETAIL DESIGN