Intersection Observer API 이해하기

Intersection Observer API는 대상 요소와 상위 요소 또는 뷰포트의 교차점 변화를 관찰하도록 설계된 최신 웹 API입니다. 이는 요소와 상위 요소 또는 최상위 문서의 뷰포트 교차점에서 변경 사항을 비동기적으로 관찰하는 방법을 제공합니다. 이는 이미지 지연 로딩, 무한 스크롤 또는 요소가 표시될 때 애니메이션 트리거를 구현하는 데 특히 유용할 수 있습니다.

주요 기능 및 이점

1. 비동기 관찰: 이벤트 리스너와 달리 교차 관찰자 콜백은 비동기적으로 실행되어 메인 스레드를 차단하는 것을 방지하고 더 나은 성능을 보장합니다.
2. 효율적인 관리: 단일 Intersection Observer 인스턴스로 여러 요소를 관찰할 수 있어 리소스 소비가 줄어듭니다.
3. 임계값 구성: 개발자는 임계값 세트를 정의하여 콜백을 트리거할 시점을 결정하고 관찰 시점을 세밀하게 제어할 수 있습니다.

교차로 관찰자 만들기

Intersection Observer를 생성하려면 새로운 IntersectionObserver 개체를 인스턴스화하고 콜백 함수와 옵션 개체를 전달해야 합니다. 기본 구문은 다음과 같습니다.

let observer = new IntersectionObserver(callback, options);

• 콜백 함수: 관찰된 요소가 루트 요소 또는 뷰포트와 교차할 때마다 이 함수가 실행됩니다.
• 옵션 개체: 이 개체는 관찰자의 행동을 구성합니다.

콜백 함수

콜백 함수는 두 가지 인수, 즉 IntersectionObserverEntry 개체 배열과 관찰자 자체를 사용합니다.

function callback(entries, observer) {
    entries.forEach(entry => {
        // Handle each intersection change
    });
}

옵션 객체

옵션 개체는 다음과 같은 속성을 가질 수 있습니다.

• root: 대상의 가시성을 확인하기 위한 뷰포트로 사용되는 요소입니다. 지정되지 않은 경우 기본값은 브라우저 뷰포트입니다.
• rootMargin: 루트 경계 상자에 적용되는 오프셋입니다. 이는 요소가 실제로 표시되기 전이나 후에 콜백을 트리거하는 데 유용할 수 있습니다. CSS 여백 속성(예: "10px 20px 30px 40px")과 유사한 값을 허용합니다.
• 임계값: 관찰자의 콜백이 실행되어야 하는 대상의 가시성 비율을 나타내는 단일 숫자 또는 숫자 배열입니다. 값 0.5는 대상의 50%가 표시될 때 콜백이 실행된다는 의미입니다.

사용 예

지연 로딩 이미지

Intersection Observer API의 일반적인 사용 사례 중 하나는 이미지 지연 로딩입니다. 이미지는 뷰포트에 들어올 때만 로드되므로 초기 로드 시간이 줄어들고 대역폭이 절약됩니다.

<img data-src="image.jpg" alt="Lazy Loaded Image">

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = document.querySelectorAll('img[data-src]');

    let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                let img = entry.target;
                img.src = img.getAttribute('data-src');
                img.removeAttribute('data-src');
                observer.unobserve(img);
            }
        });
    });

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

무한 스크롤

또 다른 사용 사례는 사용자가 페이지 하단 근처로 스크롤할 때 더 많은 콘텐츠가 로드되는 무한 스크롤을 구현하는 것입니다.

<div class="content"></div>
<div class="loader">Loading...</div>

let content = document.querySelector('.content');
let loader = document.querySelector('.loader');

let observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadMoreContent();
        }
    });
}, {
    root: null,
    rootMargin: '0px',
    threshold: 1.0
});

observer.observe(loader);

function loadMoreContent() {
    // Fetch and append new content to the content div
}

스크롤 애니메이션

Intersection Observer API를 사용하여 요소가 시야에 들어올 때 애니메이션을 트리거할 수도 있습니다.

<div class="animate-on-scroll">Animate me!</div>

let animateElements = document.querySelectorAll('.animate-on-scroll');

let observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animated');
        } else {
            entry.target.classList.remove('animated');
        }
    });
}, {
    root: null,
    rootMargin: '0px',
    threshold: 0.5
});

animateElements.forEach(el => {
    observer.observe(el);
});

고급 옵션

다중 임계값

여러 임계값을 지정하여 다양한 가시성 수준에서 콜백을 트리거할 수 있습니다.

let options = {
    root: null,
    rootMargin: '0px',
    threshold: [0, 0.25, 0.5, 0.75, 1]
};

동적 루트 마진

다양한 조건에 따라 루트 여백을 동적으로 조정할 수 있습니다.

let options = {
    root: null,
    rootMargin: calculateRootMargin(),
    threshold: 0
};

function calculateRootMargin() {
    // Calculate and return root margin based on conditions
}

Intersection Observer API는 웹페이지 요소의 가시성 변경을 처리하는 강력하고 효율적인 방법을 제공합니다. 사용자 정의 가능한 임계값과 루트 마진을 통해 세분화된 제어를 제공하며 비동기식 특성으로 인해 기본 스레드를 차단하지 않습니다. 개발자는 이 API를 활용하여 지연 로딩, 무한 스크롤, 스크롤 애니메이션과 같은 기능을 구현하여 사용자 경험과 성능을 향상할 수 있습니다.

위 내용은 Intersection Observer API 이해하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!