JavaScript | Observer 시리즈 3탄 - IntersectionObserver

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다.

문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다.

 

Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다.

---

IntersectionObserver란?

대상 요소와 그 상위 요소 혹은 최상위 도큐먼트인 viewport와의 교차 영역에 대한 변화를 관찰하여 비동기적으로 감지할 수 있도록 도와줍니다.

쉽게 말하면, 사용자가 스크롤을 하거나 화면 크기를 변경하는 등의 동작으로 해당 요소가 화면에 나타나거나 사라지는 것을 비동기적으로 관찰합니다.

이미지가 화면에 보이기 시작하는 시점에 load를 하는 이미지 lazy loading이나 무한 스크롤, 애니메이션 재생 등에 활용할 수 있습니다.

생성자 구문

• var observer = new IntersectionObserver(callback[, options])
• callback: 관찰할 요소의 가시성(Visivility, 보이는지 안 보이는지)에 변화가 생기면 호출될 함수.
  • entries: 가시성 변경 시점의 정보를 갖는 IntersectionObserverEntry 객체의 배열.
  • observer: Observer 자기 자신. 특정 조건이 되면 관찰을 중단하는 등의 용도로 사용 가능.
• options
  • root
    • default: null(최상위 문서의 뷰포트).
    • 교차 기준 영역. root에서 관찰 대상이 보이는지의 여부를 관찰.
  • rootMargin
    • default: "0px 0px 0px 0px".
    • 교차 영역 계산에 사용할 루트의 경계 설정.
  •  thresholds
    • default: 0.0
    • 가시성 기준. 0.0~1.0 사이의 값으로 루트 영역에 대상이 얼마나 보였을 때 보이는 것으로 판단할지의 기준.
    • 0.0은 대상이 루트 영역에 단일 픽셀이라도 보여지면, 대상이 보이는 것으로 판정하고, 1.0은 루트 영역에서 대상의 전체가 보일 때 보이는 것으로 판정.

메서드

• IntersectionObserver.disconnect(): 해당 observer의 모든 element target에 대한 관찰을 중단한다.
• IntersectionObserver.observer(target): 특정 element에 대한 관찰을 시작한다.
• IntersectionObserver.unobserver(target): 특정 element에 대한 관찰을 중단한다.
• IntersectionObserver.takeRecords(): 감시되는 모든 대상(IntersectionObserverEntry) 배열을 리턴한다.

예제 참고

레진 기술 블로그 - IntersectionObserver를 이용한 이미지 동적 로딩 기능 개선

Intersection Observer API의 사용법과 활용방법

---

더 읽을거리

MDN - IntersectionObserver API

Reflows and Repaints