작성완료

Intersection Observer 요소 감지

Intersection Observer는 요소가 뷰포트에 등장하거나 사라질 때를 효율적으로 감지할 수 있는 API로, 이미지 지연 로딩, 무한 스크롤, 스크롤 애니메이션 트리거 등 다양한 활용처가 있다. 성능이 우수하고 간단한 API 구조로 빠른 적용이 가능하다.

JavaScriptWeb Front Developer

Intersection Observer란?

Intersection Observer는 요소가 화면(Viewport) 안에 들어오거나 나갈 때 콜백을 실행할 수 있도록 도와주는 브라우저 API다. 스크롤 이벤트를 직접 사용하는 방식보다 성능이 뛰어나고, 코드도 간결하다.

왜 Intersection Observer를 사용해야 할까?

스크롤 이벤트처럼 반복 호출되지 않는다
브라우저가 관찰 타이밍을 최적화한다
지연 로딩(Lazy Loading) 구현에 최적화되어 있다
애니메이션 트리거, 무한 스크롤 등에 활용 가능하다

기본 사용법

javascript
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log('요소가 화면 안에 들어옴');
    }
  });
});

const target = document.querySelector('.box');
observer.observe(target);

Lazy Loading 이미지 구현 예시

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

const lazyLoad = (entries, observer) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    const img = entry.target;
    img.src = img.dataset.src;
    observer.unobserve(img);
  });
};

const observer = new IntersectionObserver(lazyLoad, {
  threshold: 0.1,
});

images.forEach((img) => observer.observe(img));

무한 스크롤 구현 예시

javascript
let page = 1;

const loadMore = async () => {
  const res = await fetch(`/api/list?page=${page}`);
  const data = await res.json();
  renderItems(data);
  page++;
};

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadMore();
  }
});

observer.observe(document.querySelector('#scroll-end'));

Intersection Observer 옵션

root: 관찰 기준이 되는 스크롤 영역
threshold: 요소가 얼마나 보여야 콜백 실행할지 (0~1)
rootMargin: 추가 여백 설정 (예: '100px')

마무리

Intersection Observer는 스크롤 기반 작업을 최적화해 성능 문제를 크게 줄여준다. 이미지 지연 로딩, 무한 스크롤, 애니메이션 트리거 등 다양한 곳에 사용할 수 있으며, 스크롤 이벤트보다 사용성이 좋고 성능도 뛰어나다.