Как избежать дублирование кода?

Question

[uRoot]

Есть простенький скрипт lazy load. Но из-за того, что кроме img и src нужно ещё лейзилоадить source c его srcset, то происходит фактически полное дублирование кода, ну, по крайней мере у меня. Не подскажите как этого избежать?
Песочница: jsfiddle
Код:

spoiler

// Для images

(function () {
    const images = document.querySelectorAll('img');

    const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
    }

    function handleImg(myImg, observer) {
        myImg.forEach(myImgSingle => {
            if (myImgSingle.intersectionRatio > 0) {
                loadImage(myImgSingle.target);
            }
        })
    }

    function loadImage(image) {
        image.src = image.getAttribute('data');
    }

    const observer = new IntersectionObserver(handleImg, options);

    images.forEach(img => {
        observer.observe(img);
    })
})();


// Для source


(function () {
    const source = document.querySelectorAll('source'); // дёргаем все source, нужно будет уточнить :)

    const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
    }

    function handleSource(mySource, observer) {
        mySource.forEach(mySourceSingle => {
            if (mySourceSingle.intersectionRatio > 0) {
                loadImage(mySourceSingle.target);
            }
        })
    }

    function loadImage(source) {
        source.srcset = source.getAttribute('data');
    }

    let observer = new IntersectionObserver(handleSource, options);

    source.forEach(source => {
        observer.observe(source);
    })
})();

Comments

[Евгений]

Ну... в js не силен, синтаксис долго буду набирать...
Создать класс для img, унаследовать его для source, переназначив свойство выбора селектора и метод loadImage

Answer 1

[Одиночка Айс]

По хорошему, написать единую функцию, которой скармливать несколько объектов, содержащих списки, типа:

var img = '';
var src = '';

observe([img,src]);

function observe(objects){
    objects.each(function(){
        //blah blah blah
    });
}

Answer 2

[Виктор Л]

const lazyLoad = (Selector) =>{
   const images = document.querySelectorAll(Selector);
   const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
    }
}
......
lazyLoad('img');
lazyLoad('source');