necotech blog

Responsive.jsを使ってPC/SPで画像を切り替える

Responsive.jsという、リサイズイベントを監視してレスポンシブコーディングを楽にする軽量ユーティリティを公開しています。以下は、Responsive.jsとjQueryを使って、PC/SPで使う画像を自動で切り替えるスクリプトを書くプラクティスです。

この記事では<picture />srcsetは使いません。簡単なルールとJSだけでやってしまおうという趣向です。

前提

下記のようなHTMLがあり、ブレイクポイントごとに画像を切り替えたいとします。

<h1><img src="img/logo.png" alt="Title"></h1>

画像を切り替えたいIMGタグに、HTML5のdata-*属性を使って独自のプロパティを指定します。

<h1><img src="img/logo.png" alt="Title" data-sp-replace="1"></h1>
画像の命名規則を決める

自動化するために、スマートフォン用画像の名前にルールを決めます。今回は、ファイル名末尾に「-sp」をつけたとします。

[PC] logo.png
[SP] logo-sp.png

JavaScript

まず、data-sp-replaceが指定されているIMGタグ全てに、スマートフォン用画像のURLをプロパティとして持たせます。

var responsive_images = $("[data-sp-replace]");

responsive_images.each(function(){
  var img = $(this);

  // スマートフォン用の画像URL
  img.data("src-sp", img.attr("src").replace(/\.(png|jpg|gif|svg)/, "-sp.$1"));

  // 元画像のURLも保持しておく
  img.data("src", img.attr("src"));
});

Responsive.jsを使って、ブレイクポイントごとに画像を切り替える処理を書きます。

responsive(0, 640, function(changed){
  // ブレイクポイントをまたいでなかったら何もしない
  if(!changed) return;

  responsive_images.each(function(){
    $(this).attr("src", $(this).data("src-sp"));
  });
});

responsive(641, null, function(changed){
  if(!changed) return;

  responsive_images.each(function(){
    $(this).attr("src", $(this).data("src"));
  });
});

スマートフォン用画像のURLを個別に指定したい箇所がある場合

稀に、ルール通りにはいかない場合があります。たとえば、sample.pngを複数使っており、場所によってsample-sp.pngsample2-sp.pngに変換したい場合や、PC/SPで拡張子が違う場合などです。そういった例外にも対応できる仕組みを考えてみます。

上記で作ったルールは活かしたまま対応するため、新たにデータ属性を追加します。

<img src="img/sample.png" alt="" data-sp-replace="1">
<img src="img/sample.png" alt="" data-sp-replace="1" data-src-sp="img/sample2-sp.png">

次に、data-src-spがない場合のみスマートフォン用画像のURLを保持していく処理に変更すれば完了です。

var responsive_images = $("[data-sp-replace]");

responsive_images.each(function(){
  var img = $(this);

  // スマートフォン用の画像URL
  if(!img.data("src-sp")){
    img.data("src-sp", img.attr("src").replace(/\.(png|jpg|gif|svg)/, "-sp.$1"));
  }

  // 元画像のURLも保持しておく
  img.data("src", img.attr("src"));
});

以上です。

Responsive.jsを使ってPC/SPで画像を切り替えるスクリプト

これで完成です。ここまでのソースを掲載します。

<h1><img src="img/logo.png" alt="Title" data-sp-replace="1"></h1>

<img src="img/sample.png" alt="" data-sp-replace="1">
<img src="img/sample.png" alt="" data-sp-replace="1" data-src-sp="img/sample2-sp.png">
var responsive_images = $("[data-sp-replace]");

responsive_images.each(function(){
  var img = $(this);

  if(!img.data("src-sp")){
    img.data("src-sp", img.attr("src").replace(/\.(png|jpg|gif|svg)/, "-sp.$1"));
  }
  img.data("src", img.attr("src"));
});

responsive(0, 640, function(changed){
  if(!changed) return;
  responsive_images.each(function(){$(this).attr("src", $(this).data("src-sp"));});
});

responsive(641, null, function(changed){
  if(!changed) return;
  responsive_images.each(function(){$(this).attr("src", $(this).data("src"));});
});
Share on Facebook
Share on LinkedIn
Pocket