レスポンシブウェブデザインの画像問題を解決する「Response JS」

Check このエントリーをはてなブックマークに追加

配布元:Response JS: mobile-first progressive enhancement in HTML5.
ライセンス:MITライセンス

「Response JS」はレスポンシブウェブデザインの画像問題を解決するためのJavaScriptライブラリです。

レスポンシブウェブデザインではPCだけでなくiPhoneやAndroid、iPadなど複数の解像度、画面サイズ向けのデザインを1つのHTMLで提供します。そのため、スマートフォン向けのデザインなのにPC向けの画像が読み込まれてしまうことがあります。

「Response JS」を利用すると画面サイズごとに読み込む画像を選択できる為、無駄な画像リクエストの発生を抑えることが可能です。

Response JSの利用方法

まずはjQuery本体とダウンロードしたResponse JSのスクリプトファイルをhead要素内などで読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="response.min.js"></script>

srcモードの利用

srcモードではimg要素のsrc属性を切り替えることで表示する画像を変更します。

まずは、body要素のdata-responsejs属性でどの画面サイズで表示を切り替えるかの設定を行ないます。

<body data-responsejs='{
    "create": [
    { "breakpoints": [0,640], "mode": "src", "prefix": "src" }
    ]}'>

この場合はウィンドウサイズ640px基準で表示を切り替えます。modeにはsrc属性をprefixにはsrcを指定しておきます。

表示を切り替えたい画像は次のように設定します。

<img src="100x100.gif" data-src640="200x200.gif" alt="example" />

こうしておくとウィンドウサイズが640以下の場合は100×100.gifがそれ以上の場合は200×200.gifが読み込まれます。

サンプル

srcモードではJavaScrip OFFの環境でも100×100.gifが読み込まれる反面、ウィンドウサイズが640以上の場合は100×100.gifと200×200.gifの２回リクエストが発生してしまう問題もあります。

これはmarkupモードに変更することで解決できます。

markupモードの利用

markupモードでは表示するHTMLを変更することで表示を切り替えます。

<body data-responsejs='{
    "create": [
    { "breakpoints": [0,640], "mode": "markup", "prefix": "r" }
    ]}'>

markupモードではmodeに「markup」を指定し、表示を切り替えたい箇所は次のように設定します。

<span data-r0='<img src="100X100.gif" alt="100X100">' data-r640='<img src="200X200.gif" alt="200X200">'>default</span>

サンプル

これによりウィンドウサイズが640以下の場合は100×100.gifがそれ以上の場合は200×200.gifが読み込まれます。

bodyの設定を以下のようにすることで複数のモードを同時に利用することも可能です。

<body data-responsejs='{
    "create": [
   { "breakpoints": [0,640], "mode": "src", "prefix": "src" },
    { "breakpoints": [0,640], "mode": "markup", "prefix": "r" }
    ]}'>

スポンサードリンク

コメント

カテゴリー：Android HTML5 iPad iPhone jQuery ライブラリ