ウィンドウサイズで画像の表示をJavascriptで切り替える

最近よく利用するのでメモがてら。

以下コード入れて、imgにクラス .js-resp 付与すると画面サイズで切り替えます。

$(function() {
    var $elem = $('.js-resp');
    var sp = '_sp.';
    var pc = '_pc.';
    var replaceWidth = 768;

    function imgResp() {
        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));
            }
        });
    }
    imgResp();

    var resizeTimer;
    $(window).on('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            imgResp();
        }, 200);
    });
});

$(function() {

var $elem = $('.js-resp');

var sp = '_sp.';

var pc = '_pc.';

var replaceWidth = 768;

function imgResp() {

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

}

});

}

imgResp();

var resizeTimer;

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

clearTimeout(resizeTimer);

resizeTimer = setTimeout(function() {

imgResp();

}, 200);

});

画像にはファイル名の後ろに _pc と _sp と命名すればOK、HTMLに記述する場合には _pc の方のみを記述してください。

<img src="./assets/img/hoge_pc.jpg" class="js-resp" alt="">

1	<img src="./assets/img/hoge_pc.jpg" class="js-resp" alt="">

要件に応じて命名やウィンドウサイズは適宜変更してくださいね。

共有:

いいね: