クリエイター：コーディング備忘録ブログ

RSS

コーディング

jsでpc/sp時の画像の切り替え

2019.03.07

display:block/none;での画像切り替えではなく、画像のソースをjsで切り替えて表示する方法です。
スマホレイアウトになったときに、いちいち画像にクラス名を付与するのが面倒な場合便利です。

<img src="images/〇〇_sp.png" class="change">

1	<img src="images/〇〇_sp.png" class="change">

$(function () {
 //変数セット
 var $elem = $('.change');
 var sp = '_sp.';
 var pc = '_pc.';
 var replaceWidth = 768; 
 
 function imageSwitch() {
 
 var windowWidth = parseInt($(window).width());
 
 $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));
 }
 });
 }
 imageSwitch();
 
 var delayStart;
 var delayTime = 200; //ミリSec
 $(window).on('resize', function () {
 clearTimeout(delayStart);
 delayStart = setTimeout(function () {
 imageSwitch();
 }, delayTime);
 });
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

$(function () {

//変数セット

var $elem = $('.change');

var sp = '_sp.';

var pc = '_pc.';

var replaceWidth = 768;

function imageSwitch() {

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

$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));

}

});

}

imageSwitch();

var delayStart;

var delayTime = 200; //ミリSec

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

clearTimeout(delayStart);

delayStart = setTimeout(function () {

imageSwitch();

}, delayTime);

});

});

切り替える画像は画像の名前の最後に、_pc、_spとつけるだけでOKです。

この記事を見た人は次の記事も見ています。

行動履歴を管理できるプラグインWP Security Audit Log

前の記事

ノート風の罫線を作成する方法

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

ハンバーガーメニュー

2017.08.31

コーディング

リストの中で画像を横並べ

2018.05.24

コーディング

:placeholder-shown

2018.06.25

コーディング

文字を縦書きにする

2017.09.08

コーディング

Custom Fields 値の文字数制限をかける

2019.03.12

コーディング

WP 複数の投稿タイプの新着一覧の作成

2018.12.10