JavaScript для замены элемента при разных размерах экрана

22.11.2020

Иногда необходимо произвести как-либо действия, если размер экрана изменился, но повесить событие onresize и выполнять весь код при любом изменении - бывает накладно по ресурсам.

Учитывая, что обычно действие требуется только при пересечении некоторого рубежа / брейкпоинта (например, только если ширина окна стала меньше 972px), то ниже будет примет решения такой задачи.

В коде происходит замена изображения, в зависимости от размера экрана - это просто наглядная демонстрация, конечно лучше для такого использовать тэг picture или атрибут srcset

 
let soReplecer = {
    
    reduce: 1,
    enlarge: 0,
    
    doReplace: function(action) {
        $('.top_banner img').each(function () {
            let elA = $(this);
            let sBig = 'big.jpg';
            let sSmall = 'small.jpg';

            if(action == soReplecer.reduce) { // Уменьшаем
                elA.attr('src', sSmall);
            } else {
                elA.attr('src', sBig);
            }
        });
    },

    onResize: function() {
        const iWidth = 972;
        const sCalss = "_so_min";
        const elBody = $("body");
        const bMin = elBody.hasClass(sCalss);
        
        if( ($(window).width() < iWidth) && (!bMin) ){
            elBody.addClass(sCalss);
            soReplecer.doReplace(this.reduce);
        } else if( ($(window).width() > iWidth) && (bMin) ){
            elBody.removeClass(sCalss);
            soReplecer.doReplace(this.enlarge);
        } else {
            
        }
    },
    
    init: function() {
        window.onresize = function(event) {
            soReplecer.onResize();
        };
        
        soReplecer.onResize();
    }
}

soReplecer.init();


 
    <div class="top_banner">
        <img src="big.jpg" alt="pic" />
    </div>

Категории: Web, JavaScript
Яндекс.Метрика