uroot
@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);
    })
})();
  • Вопрос задан
  • 73 просмотра
Пригласить эксперта
Ответы на вопрос 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');
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
от 30 000 до 65 000 руб.
от 60 000 до 90 000 руб.
BSSL Москва
от 50 000 до 150 000 руб.
22 июл. 2019, в 07:20
3000 руб./за проект
22 июл. 2019, в 07:13
150000 руб./за проект
22 июл. 2019, в 01:43
500 руб./в час