자바스크립트 HTML 특정 요소 도달 감지 예시

특정 위치까지 도달하였을 때 실행하고 싶은 로직이 있을 수 있죠.

이 경우 사용할 수 있는 객체가 있습니다.

 

목차

 

특정 요소 도달 감지

가시적으로 특정 요소에 도달했는지 체크하기 위해 사용하는 객체입니다. 기본적인 사용법은 다음과 같습니다.

// 옵션 설정
var config = {
    root: document.querySelector('#scrollArea'), // 기준 영역 지정
    rootMargin: '0px', // root 영역의 여백
    threshold: 0.1 // root에 지정된 영역 내에 10% 보여질 때 감지
};

// 객체 생성
var observer = new IntersectionObserver(function(entries) {
    var entry = entries[0];
    if (entry.isIntersecting) {
        // 감지 시 수행할 작업
        observer.disconnect(); // 감지 종료
    }
}, config);

// 감지할 타겟 지정
var target = document.querySelector('#target');
observer.observe(target);

 

특정 요소 도달 감지 사용 예

이미지 지연 로딩에 사용할 수 있습니다. 페이지를 구성하는 요소 중 이미지가 차지하는 비중이 큰 경우 모든 이미지를 로드하려면 로딩이 오래 걸릴 수 있습니다. 따라서 눈에 보이지 않는 이미지를 미리 로드하지 않으면 페이지를 좀 더 빠르게 표시할 수 있습니다.

 

다음은 작성 예시입니다.

var imgs = $('img');
if(imgs.length > 0){
    imgs.each(function(index, img){
        var $img = $(img);
        if($img.offset().top > window.getWindowCleintHeight()) {
            var width = $img.innerWidth();
            var height = $img.innerHeight();
            if(width > 1 && height > 1) {
                $img.css('width',width+'px');
                $img.css('height',height+'px');
            }
            $img.css('opacity','0.2');
            if(img.getAttribute('srcset') != null){
                img.setAttribute('data-srcset', img.getAttribute('srcset'));
                img.setAttribute('srcset', $('#blank-img').attr('src'));
            }
            if(img.getAttribute('src') != null){
                img.setAttribute('data-src', img.getAttribute('src'));
                img.setAttribute('src', $('#blank-img').attr('src'));
            }
            img.classList.add('lazyload');
        }
    });
}

$('img.lazyload').each(async function(index, image){
    await (function(element){
        var intersectionObserverOptions = {
            threshold: 0.1
        };
        return new Promise(function(resolve) {
            var observer = new IntersectionObserver(async function(entries) {
                var entry = entries[0];
                if (entry.isIntersecting) {
                    resolve();
                    observer.disconnect();
                }
            }, intersectionObserverOptions);
            observer.observe(element);
        });
    })(image);

    if(image.getAttribute('src') != null){
        image.setAttribute('src', image.getAttribute('data-src'));
    }
    if(image.getAttribute('srcset') != null){
        image.setAttribute('srcset', image.getAttribute('data-srcset'));
    }
    $(image).animate({'opacity':'1.0'});
});

 

도움이 되시길 바랍니다.