Intersection Observer

Intersection Observer를 사용할 일이 생겼던건
많은 영상을 웹에 보여줘야하는 상황에서, 내가 보고있는 화면에선 동영상이 재생되는 로직을 작성하다보니 화면단으로 lazy loading을 처리해주면, 웹 속도가 빨라짐에 영향이 있다 생각이 들었고, 이를 구현하는 실제 기능을 어떻게 적용할까 찾다가 알게 되었다.

WebAPI

브라우저 뷰포트와 설정한 요소의 교차점을 관철,
요소가 뷰포트에 포함되는지 구별해주는 역할을 하는 api 다.

const observer = new InterSectionObserver((entries) => {
  						entries.forEach((entry) => {
                          const video = entry.target as HTMLVideoEelement;
                          //...
                        })
  
  
  observer.observe(element) // element를 관찰
                                         

해당 new InterSectionObserver 를 통해 관찰자를 선언해서 관찰할 대상을 지정해 준다.

현재 요소에 화면이 얼마나 보이고 있는지에 따라 동작하는 제어가 가능한
부분이 구현에 유리하게 작용될 것으로 생각된다.