프로그래밍 & IT 정보/Javascript

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

아미넴 2021. 12. 22.
반응형

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

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

 

목차

     

    특정 요소 도달 감지

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

    // 옵션 설정
    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'});
    });

     

    도움이 되시길 바랍니다.

    반응형
    그리드형(광고전용)

    댓글0

    💲 추천 글