intersectionObserver

1. 어떤기능을 하는가

• 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공한다.

• 다수의 이미지가 중심이 되는 페이지에서 화면상의 모든 이미지를 한 번에 불러오면 불필요한 네트워크 비용이 증가하고 성능이 저하될 수 있는데 intersectionObserver는 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있다.

2. 구성

const io = new IntersectionObserver(callback, options) // 관찰자 초기화
io.observe(element) // 관찰할 대상(요소) 등록

3. callback 함수

• 2개의 인수 entries와 observer를 가진다.
• 관찰할 대상이 등록되거나 뷰포트에 변화가 생기면(대상이 들어오고 나가는 등) 관찰자는 콜백(Callback)을 실행한다.

1. entries

• boundingClientRect : 관찰대상의 사각형 정보를 반환함.
• intersectionReact : 관찰대상의 교차한 영역 정보 반환함.

2. observer

• 콜백이 실행되는 해당 인스턴스를 참조한다.

5. options

1. root

• 대상을 감시할 상위요소
• null(기본값) : viewport

2. rootMargin

• 말 그대로 root의 margin
• margin을 주면 threshold도 시작점이 바뀜

3. threshold

• 대상요소와의 경계 영역과 교차 비율
• threshold: 0.2일 경우 0.2정도만 root에 보여도 observer가 실행된다.

6. Methods

• observe() : 대상요소의 관찰을 시작
• disconnet() : intersectionObserver가 관찰하는 모든 요소의 관찰 중지

const io = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    console.log(entry) // entry is 'IntersectionObserverEntry'
  })
}, options)

io.observe(element)