JavaScript - 2017-02-22

PCとスマホで見た時に画像切り替える方法

ここ数年レスポンシブ対応が当たり前になってきましたが、コーディングする際よくある問題が画像周りです。今回はPCとスマホで見た時に画像を切替える方法です。
まず同フォルダに【_sp】と【_pc】の画像を用意します。

本文にhtmlを追加

<img alt="" class="imgChange" data-img="images/sample_pc.jpg">

下記scriptをheadかbodyどちらかに追加

$(function() {
  var $elem = $('.imgChange');
  var replaceWidth = 768;
  function imageSwitch() {
    var windowWidth = parseInt($(window).width());
    $elem.each(function() {
      var $this = $(this);
      if(windowWidth >= replaceWidth) {
        $this.attr('src', $this.data("img").replace('_sp', '_pc'));
      } else {
        $this.attr('src', $this.data("img").replace('_pc', '_sp'));
      }
    });
  }
  imageSwitch();
  var resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      imageSwitch();
    }, 200);
  });
});
Related Posts

Related Posts

便利なSassの@mixin集めました

2017-03-31

新規案件のコーディング時に追加しときたいCSS

2017-01-16

要素の高さをJQueryでそろえる方法

2017-01-11

テンプレートエンジン「EJS」で効率的にコーディングするためのメモ

2018-04-18