Иногда необходимо произвести как-либо действия, если размер экрана изменился, но повесить событие 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>