intersectionObserver API

🍊 intersectionObserver API

타겟 요소와 root 요소 사이의 intersection 변화를 비동기적으로 관찰하는 방법

활용 방법

• 페이지 스크롤 시 이미지를 Lazy-loading(지연 로딩)할 때
• Infinite scrolling(무한 스크롤)을 통해 스크롤할 때 새로운 콘텐츠를 불러올 때
• 광고의 수익을 계산하기 위해 광고의 가시성을 참고할 때
• 사용자가 결과를 볼 것인지에 따라 애니메이션 동작 여부를 결정할 때

🍊 intersection observer 생성하기

// IntersectionObserver의 options를 설정합니다.
const options = {
  root: null,
  // 타겟 이미지 접근 전 이미지를 불러오기 위해 rootMargin을 설정했습니다.
  rootMargin: '0px 0px 30px 0px',
  threshold: 0
}

// IntersectionObserver 를 등록한다.
const io = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    // 관찰 대상이 viewport 안에 들어온 경우 image 로드
    if (entry.isIntersecting) {
      // data-src 정보를 타켓의 src 속성에 설정
      entry.target.src = entry.target.dataset.src;
      // 이미지를 불러왔다면 타켓 엘리먼트에 대한 관찰을 멈춘다.
      observer.unobserve(entry.target);
    }
  })
}, options)

// 관찰할 대상을 선언하고, 해당 속성을 관찰시킨다.
const images = document.querySelectorAll('.image');
images.forEach((el) => {
  io.observe(el);
})

🍉 Parameters

callback

타겟 엘리먼트가 교차되었을 때 실행할 함수

• entries
  : IntersectionObserverEntry 객체의 리스트. 배열 형식으로 반환하기 때문에 forEach를 사용해서 처리를 하거나, 단일 타겟의 경우 배열인 점을 고려해서 코드를 작성해야 합니다.

  • IntersectionObserverEntry.boundingClientRect
    : 타겟 엘리먼트의 정보를 반환합니다.
  • IntersectionObserverEntry.rootBounds
    : root 엘리먼트의 정보를 반환합니다. root를 선언하지 않았을 경우 null을 반환합니다.
  • IntersectionObserverEntry.intersectionRect
    : 교차된 영역의 정보를 반환합니다.
  • IntersectionObserverEntry.intersectionRatio
    : IntersectionObserver 생성자의 options의 threshold와 비슷합니다. 교차 영역에 타겟 엘리먼트가 얼마나 교차되어 있는지(비율)에 대한 정보를 반환합니다. threshold와 같이 0.0부터 1.0 사이의 값을 반환합니다.
  • IntersectionObserverEntry.isIntersecting
    : 타겟 엘리먼트가 교차 영역에 있는 동안 true를 반환하고, 그 외의 경우 false를 반환합니다.
  • IntersectionObserverEntry.target
    : 타겟 엘리먼트를 반환합니다.
  • IntersectionObserverEntry.time
    : 교차가 기록된 시간을 반환합니다.

• observer
  : 콜백함수가 호출되는 IntersectionObserver

  • IntersectionObserver.observe(targetElement)
    : 타겟 엘리먼트에 대한 IntersectionObserver를 등록할 때(관찰을 시작할 때) 사용합니다.
  • IntersectionObserver.unobserve(targetElement)
    : 타겟 엘리먼트에 대한 관찰을 멈추고 싶을 때 사용하면 됩니다. 예를 들어 Lazy-loading(지연 로딩)을 할 때는 한 번 처리를 한 후에는 관찰을 멈춰도 됩니다. 이 경우에는 처리를 한 후 해당 엘리먼트에 대해 unobserve(targetElement)을 실행하면 이 엘리먼트에 대한 관찰만 멈출 수 있습니다.
  • IntersectionObserver.disconnect()
    : 다수의 엘리먼트를 관찰하고 있을 때, 이에 대한 모든 관찰을 멈추고 싶을 때 사용하면 됩니다.
  • IntersectionObserver.takerecords()
    : IntersectionObserverEntry 객체의 배열을 리턴합니다.

options

• root
  대상 객체의 가시성을 확인할 때 사용되는 뷰포트 요소. 이는 대상 객체의 조상 요소여야 한다. 기본값은 브라우저 뷰포트이며, root 값이 null 이거나 지정되지 않을 때 기본값으로 설정된다.

• rootMargin
  root가 가진 여백이다. 이 속성의 값은 CSS의 margin 속성과 유사하다.
  ex) "10px 20px 30px 40px" (top, right, bottom, left).
  이 값은 퍼센티지가 될 수 있다. root 요소의 각 측면의 bounding box를 수축시키거나 증가시키며, 교차성을 계산하기 전에 적용된다.
  rootMargin 값에 따라 교차 영역이 확장 또는 축소된다.
  기본값은 0이다.

• threshold
  observer의 콜백이 실행될 대상 요소의 가시성 퍼센티지를 나타내는 단일 숫자 혹은 숫자 배열이다. 만일 50%만큼 요소가 보여졌을 때를 탐지하고 싶다면, 값을 0.5로 설정하면 된다. 혹은 25% 단위로 요소의 가시성이 변경될 때마다 콜백이 실행되게 하고 싶다면 [0, 0.25, 0.5, 0.75, 1] 과 같은 배열을 설정한다.
  기본값은 0이며(이는 요소가 1픽셀이라도 보이자 마자 콜백이 실행됨을 의미한다). 1.0은 요소의 모든 픽셀이 화면에 노출되기 전에는 콜백을 실행시키지 않음을 의미한다.

---

참고
intersectionObserver API