Intersection Observer

: 브라우저 뷰포트와 설정한 요소의 교차점을 관찰

: 뷰포트에 대한 요소 포함 여부, 즉 사용자 화면에 지금 보이는 요소인지 아닌지 구별하는 기능 제공

: 비동기적 실행으로 scroll같은 이벤트 기반 요소 관찰에서 발생하는 렌더링 성능, 이벤트 연속 호출 등에 문제없이 사용 가능

threshold 속성으로 교차점에 대한 비율 설정 가능

이런 스크롤을 통한 추가 콘텐츠 로드되는 기능을 만들려고 한다면

IntersectionObserver API 활용

count : 한 번에 로드할 아이템의 수 지정

itemIndex : 현재까지 로드된 아이템의 인덱스 추적

entries : 관찰 대상들의 배열 -> .end 클래스 가진 요소가 관찰 대상

옵션 객체 : root, threshold

• root: null -> 뷰포트 기준으로 관찰
• threshold: 0.1 -> 타겟 요소의 10%가 보일 때 콜백 함수를 실행

콜백 함수

• entries 배열을 순회하면서 관찰 대상에 대해 처리
• isIntersecting 속성으로 뷰포트에 들어왔는지 확인
• .list 클래스 가진 요소 선택 후 itemIndex 부터 itemIndex + count 까지의 아이템 생성해서 리스트에 추가
  
  

이미지 lazyloading

이렇게 이미지들이 나열되어 있다면

이미지 태그들을 imgs에 담아서 forEach문으로 하나씩 관찰 시작

threshold 1로 설정하여 이미지가 뷰포트에 완전히 들어오면 인식

인식 되어지면 dataset에 있는 url을 src에 넣어주기

끝나면 unobserve 해주기

=> 완전히 뷰포트에 들어와야 data.src를 넣어주면서 lazyloading이 되는 구조