@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);
    })
})();
  • Вопрос задан
  • 89 просмотров
Пригласить эксперта
Ответы на вопрос 2
daemonhk
@daemonhk
ПсиХоПат
По хорошему, написать единую функцию, которой скармливать несколько объектов, содержащих списки, типа:

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

observe([img,src]);

function observe(objects){
    objects.each(function(){
        //blah blah blah
    });
}
Ответ написан
Комментировать
Fzero0
@Fzero0
Вечный студент
const lazyLoad = (Selector) =>{
   const images = document.querySelectorAll(Selector);
   const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
    }
}
......
lazyLoad('img');
lazyLoad('source');
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы