자바스크립트 "Intersection Observer API"

Intersection Observer API는 요소가 뷰포트에 들어오고 나가는 시기 또는 다른 요소와 교차하는 시기를 효율적으로 감지할 수 있는 JavaScript API입니다. 이는 이미지 또는 비디오 지연 로드, 무한 스크롤 또는 요소가 표시될 때 애니메이션 트리거에 특히 유용합니다.

​

다음은 Intersection Observer API를 사용하여 뷰포트에 있을 때만 이미지를 로드하는 방법을 보여주는 샘플 코드 스니펫입니다.

​

const images = document.querySelectorAll('img[data-src]');

​

const options = {

rootMargin: '0px',

threshold: 0.5

};

​

const observer = new IntersectionObserver((entries, observer) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

const img = entry.target;

img.src = img.dataset.src;

observer.unobserve(img);

}

});

}, options);

​

images.forEach(img => {

observer.observe(img);

});

​

이 예제에서는 먼저 로드하려는 이미지의 URL을 포함하는 `data-src` 속성이 있는 모든 `img` 요소를 선택합니다. 그런 다음 관찰된 요소가 뷰포트에 들어오거나 나올 때마다 호출되는 콜백 함수가 있는 `IntersectionObserver` 개체를 만듭니다.

​

`options` 객체는 뷰포트로 사용할 루트 요소(`root`), 뷰포트 주변 여백(`rootMargin`), 콜백이 트리거되기 전에 표시되어야 하는 요소 영역의 비율(`threshold`)을 지정합니다.

​

콜백 함수에서 관찰된 요소를 나타내는 각 `entry` 개체를 반복하고 `isIntersecting` 속성을 사용하여 현재 뷰포트와 교차하는지 여부를 확인합니다. 그렇다면 `img` 요소의 `src` 속성을 `data-src` 속성 값으로 설정하여 이미지를 로드한 다음 관찰자 개체에서 `unobserve` 메서드를 호출하여 관찰을 중지합니다.

​

마지막으로 각 img 요소에 대한 관찰자 개체의 `observe` 메서드를 호출하여 관찰을 시작합니다.

​

다음은 Intersection Observer API를 사용하여 요소가 표시될 때 애니메이션을 트리거하는 예입니다.

​

const targets = document.querySelectorAll('.animate-on-scroll');

​

const options = {

rootMargin: '0px',

threshold: 0.5

};

​

const observer = new IntersectionObserver((entries, observer) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('animate');

observer.unobserve(entry.target);

}

});

}, options);

​

targets.forEach(target => {

observer.observe(target);

});

​

이 예에서는 먼저 표시될 때 애니메이션을 적용하려는 `animate-on-scroll` 클래스가 있는 모든 요소를 선택합니다. 그런 다음 이전과 동일한 옵션으로 `IntersectionObserver` 개체를 만듭니다.

​

콜백 함수에서 `entry` 개체의 `isIntersecting` 속성을 확인하여 `target` 요소가 표시될 때 대상 요소에 `animate` 클래스를 추가합니다. 그런 다음 관찰자 개체에서 `unobserve` 메서드를 호출하여 `target` 요소 관찰을 중지합니다.

​

마지막으로 각 `target` 요소에 대한 관찰자 개체의 `observe` 메서드를 호출하여 관찰을 시작합니다. 요소가 뷰포트와 교차하면 `animate` 클래스가 추가되어 애니메이션이 트리거됩니다.