レスポンシブjQueryリサイズでPCとSPで画像切り替えメモ #jQuery

var border = 768;
以下で画像の"_pc","_sp"部分を入れ替えます。

changeImg.html



<!DOCTYPE html>
<html>
  <head>
    <title>Hello world!</title>
    <style type="text/css">
        .toggleImg{
            width: 300px;
            height: auto;
        }
    </style>
  </head>

  <body>

<img class="toggleImg" src="img_pc.png">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script type="text/javascript">

$(window).on('load resize', function(){


  var width = $(window).width();

  var border = 768;

  if( width <  border){
    $(".toggleImg").each(function(){
      $(this).attr("src", $(this).attr("src").replace("_pc","_sp"));
    })
  } else {
    $(".toggleImg").each(function(){
      $(this).attr("src", $(this).attr("src").replace("_sp","_pc"));
    })
  }

});





$(window).on('load resize', function(){

  var width = $(window).width();
  var border = 768;

  if( width <  border){

    $(".toggleImg li span").each(function(e){
      var bg = $(this).css('background-image');
      bg = bg.replace("_pc","_sp");
      $(this).css('background-image',bg);
    })
  } else {
    $(".toggleImg li span").each(function(e){
      var bg = $(this).css('background-image');
      bg = bg.replace("_sp","_pc");
      $(this).css('background-image',bg);
    })
  }

});


</script>

  </body>
</html>

レスポンシブjQueryリサイズでPCとSPで画像切り替え メモ

レスポンシブjQueryリサイズでPCとSPで画像切り替えメモ