【jQuery】スマートフォンやPC用に画像を切り替える方法

css

まぁスマートフォンとPC用だと画像の切り替えに迷う。
基本的に画像をスマートフォンに対応させるには下記のようなCSSが多い気がする。

とりあえず現状では、下記の用にcssを指定するのはデフォルトのよう。

img{
  width:100%;
  max-width:100%;
  height:auto;
 }

幅はIE用に「width:100%」にしておいて、後は「max-width:100%」にしておく。高さは自動的に変わるように「height:auto」にしておく。これで、PCやスマートフォンでのデバイスの幅、もしくは画像を包んでいる要素に合わせて画像は100%で表示される。

一つの画像による要領の問題

上記の方法だとスマートフォンでも画像がデバイスに合わせて縮小されるがもともとのファイルサイズが変わらないので、使いまわすのが難しいところ。

そこでjqueryとnoscript要素を利用した切り替え方法が「Antii Peisa氏」によって提案されてるとのこと。

参考：http://www.avoine.fi/

javascriptが無効の場合も考慮するnoscript要素

jquey(javascript)が使えない環境の場合は通常の画像を表示させるように指定しておく。

html5から追加されたdata属性を使用する

のちのちjqueryで要素を取得するのに使用するので、data属性に大きい画像と小さい画像を指定しておく。

data属性は「data-」以降に独自に属性を追加できる。参考：「jQueryでHTML5の独自データ属性（data Attributes）を扱う」

jqueryを使用して画像を切り替える

jqueryでdata()メソッドを利用してhtml5のdata属性にアクセスできるので、スクリーンの幅を調べて、幅によって小さい画像か大きい画像までのパスを取得してimg要素のsrc属性に指定してnoscript要素の後に追加する。

$("noscript[data-large][data-small]").each(function(){
  //スクリーンの画像が480pxより大きかったら大きい画像で小さかったら小さい画像のパスを取得
  var src=screen.width>=480? $(this).data("large"):$(this).data("small");
　
  // img要素をnoscript要素の後に追加する
  $(""+$(this).data("alt")+"").insertAfter($(this)); 
});

上記の方法で480pxより大きいか小さいか指定しているがここは独自で変えてもいい。