getBoundingClientRect 메서드

getBoundingClientRect는 DOM API의 한 부분으로, 특정 요소의 뷰포트에 대한 위치와 크기 정보를 얻는 데 사용됩니다. 이 메서드는 DOMRect 객체를 반환하며, 이 객체에는 요소의 좌측 상단과 우측 하단이 뷰포트에 대한 좌표가 포함됩니다.

전통적인 이미지 지연 로딩 구현 방식에서는 scroll 이벤트를 감시하고, img 요소의 뷰포트 상단 위치를 계산하여 브라우저 높이보다 작은 경우에만 이미지를 로드했습니다.

하지만 이 방법은 scroll 이벤트가 자주 발생하여 많은 계산을 필요로 하므로 성능 문제를 유발할 수 있습니다.

// 예제 코드: 요소의 위치 정보 가져오기
const targetItem = document.querySelector("#targetElement");
const positionData = targetItem.getBoundingClientRect();

console.log(`상단 위치: ${positionData.top}px`); // 요소 상단의 뷰포트 기준 거리
console.log(`좌측 위치: ${positionData.left}px`); // 요소 좌측의 뷰포트 기준 거리
console.log(`너비: ${positionData.width}px`); // 요소의 너비
console.log(`높이: ${positionData.height}px`); // 요소의 높이

IntersectionObserver API

IntersectionObserver는 요소와 뷰포트의 교차 상태를 감시하는 API로, 비동기적으로 하나 이상의 요소를 관찰하여 요소가 뷰포트에 진입하거나 떠날 때 콜백 함수를 트리거합니다.

IntersectionObserver를 사용하면 지연 로딩, 무한 스크롤, 시각화 통계, 광고 노출량 통계 등 일반적인 인터랙션 효과를 구현할 수 있습니다.

// 예제 코드: IntersectionObserver 생성 및 설정
const observerConfig = {
  root: null, // 기본값: 브라우저 뷰포트
  rootMargin: "0px", // 루트 요소의 경계 오프셋
  threshold: 0.3 // 콜백 실행을 위한 교차 비율 임계값
};

// IntersectionObserver 인스턴스 생성
const visibilityObserver = new IntersectionObserver((items, observerInstance) => {
  items.forEach((item) => {
    if (item.isIntersecting) {
      console.log("요소가 화면에 보임");
      // 이미지 로드 또는 다른 작업 수행
      loadContent(item.target);
    } else {
      console.log("요소가 화면에서 숨겨짐");
    }
  });
}, observerConfig);

// 특정 요소 관찰 시작
const contentElement = document.getElementById("contentArea");
visibilityObserver.observe(contentElement);

IntersectionObserver 콜백 매개변수

IntersectionObserver 콜백 함수는 두 개의 매개변수(entries, observer)를 받습니다. entries 배열에는 각각 IntersectionObserverEntry 객체가 포함됩니다.

// 예제 코드: 콜백 함수 내에서 사용 가능한 속성
const handleVisibilityChange = (observedItems, observer) => {
  observedItems.forEach((item) => {
    console.log("변화 감지된 요소 정보:");
    console.log(`변화 시간: ${item.time}ms`); // 변경 발생 시간(밀리초)
    console.log(`대상 요소:`, item.target); // 관찰 대상 요소
    console.log(`루트 영역:`, item.rootBounds); // 루트 요소의 영역 정보
    console.log(`요소 영역:`, item.boundingClientRect); // 대상 요소의 영역 정보
    console.log(`교차 영역:`, item.intersectionRect); // 교차 영역 정보
    console.log(`교차 비율: ${item.intersectionRatio}`); // 교차 비율 (0-1)
    console.log(`교차 상태: ${item.isIntersecting ? "진입" : "이탈"}`); // 진입/이탈 상태
  });
};

// 관찰 중인 요소 여러 개 설정
const firstElement = document.querySelector(".item-1");
const secondElement = document.querySelector(".item-2");

visibilityObserver.observe(firstElement);
visibilityObserver.observe(secondElement);

// 특정 요소 관찰 중지
visibilityObserver.unobserve(firstElement);

// 모든 관찰 중단
visibilityObserver.disconnect();

IntersectionObserver는 요소의 가시성 변화를 효율적으로 감시할 수 있어 scroll 이벤트를 사용하는 전통적인 방식보다 성능이 우수합니다. 특히 많은 수의 요소를 감시해야 할 때 효과적입니다.