Here is banner demo

It will change source depending on screen reslution. It saves data, dynamically adding source, downloading proper image on proper device.

ResponsiveBanner class is managing sizes array and gives you methods to change them how you like. You can do it manually, add new sources and trigger them. TODO: Write feature for auto detect data attribute sources, write feature to auto change them according to resolution

Methods

interface IResponsiveBanner {
    setSize(sizeName: string): void;
    getCurrentSize(): string;
    addNewSource(name: string, size: ISize): void;
}

interface ISize {
    sourceUrl: string;
}

Settings

By default class needs only banner $ element. It will find img tag inside to change its src. You can overwrite its selector manually in constructor

constructor($element: JQuery, settings?: IResponsiveBannerSettings)

interface IResponsiveBannerSettings {
    $image: JQuery;
}

This demo:

Resize the screen to see effects of banner below

import {IResponsiveBanner, IResponsiveBannerSettings, ResponsiveBanner} from './class.cs-responsive-banner';

// Demo usage

const $banner: JQuery = $('.cs-responsive-banner');

const banner: IResponsiveBanner = new ResponsiveBanner($banner);

const tabletSrc: string = $banner.attr('data-src-tablet');
const desktopSrc: string = $banner.attr('data-src-desktop');
const mobileSrc: string = $banner.attr('data-src-mobile');

banner.addNewSource('desktop', {
    sourceUrl: desktopSrc,
});

banner.addNewSource('tablet', {
    sourceUrl: tabletSrc,
});

banner.addNewSource('mobile', {
    sourceUrl: mobileSrc,
});

function setSize(width) {
    if (width > 1024) {
        banner.setSize('desktop');
    } else if (width >= 768) {
        banner.setSize('tablet');
    } else {
        banner.setSize('mobile');
    }
}

$(window).on('resize', function () {
    let width: number = $(window).width();

    setSize(width);

});

setSize($(window).width());

export default banner;
banner