PCとスマホで別の画像に切り替えてくれるjQuery

今回やりたいこと

レスポンシブサイトの場合、PCはPC用、スマホはスマホ用のサイズや若干デザインの異なる画像を使用したいことがあります。

メディアクエリを使用して、PCの時はスマホ用の画像は「display: none;」させる、という方法でも実装は可能ですが、HTMLのソースが長くなってしまいます。

HTML

大抵の場合、スマホファーストでコーディングをすることが多いと思いますが、HTMLはいたって普通で、img要素にPC・スマホどちらかのsrcを指定しておきます。(私の場合はスマホ用の画像を指定します。)

jQueryでsrcの中身を置き換える作業をするので、PC用のimgのsrcはHTML上は存在しなくてOKです。

注意:画像名

一つ、重要なことをお伝えするのを忘れていました。保存する画像名は必ず末尾を統一してください。
PCの画像の場合は「~_pc.jpg(ファイル形式は問いません)」、スマホの画像の場合は「~_sp.jpg(ファイル形式は問いません)」としてください。

文字列置換を行うので、「sp」と「pc」という文字列をすべて共通にする必要があります。

jQuery

以下が画像を切り替えるためのjQueryのソースです。

今回は「.js-image-replace」というクラスが付与されているimg要素にこの置換が適用されるので、先ほどのHTMLに、適用させたいimg要素に「js-image-replace」クラスを付与してあげましょう。


  $(function() {
    var $elem = $(".js-image-replace");
    var sp = "_sp.";
    var pc = "_pc.";
    var replaceWidth = ブレークポイント; // 数字を指定(px)

    function imageReplace() {
      var windowWidth = parseInt(window.innerWidth);
      $elem.each(function() {
        var $this = $(this);
        if (windowWidth >= replaceWidth) {
          $this.attr("src", $this.attr("src").replace(sp, pc));
        } else {
          $this.attr("src", $this.attr("src").replace(pc, sp));
        }
      });
    }
    imageReplace();
  });

これでブラウザの横幅を伸び縮みさせると、指定したブレークポイントで画像が切り替わるようになっています。

もしうまくいかない場合は、「resize」イベントを追加すればうまくいくと思います。

related article

2019/11/15 JavaScript

slick.jsをwebpackで使いこなす

2021/07/19 JavaScript

lazyload.jsとスピナーアイコンを組み合わせる

2019/11/08 JavaScript

1個開けると他は閉じるアコーディオンメニュー

2019/10/10 JavaScript

HTML内に書いたjQueryが動かない