IntersectionObserver

[Intersection Observer의 실행시점]

• 최초 렌더시 한번 모든 entries실행
• threshold(문지방) : 설정해놓은 가시성이 넘어가거나 작아질때 옵저버가 실행, 기본값 0

  • threshold 만족하는 지점( 문지방에 딱 걸릴때 )에서 옵저버 실행 → 콜백 딱 실행!

  • 실행시점의 콜백의 첫번째 인자 (entries) 는 그 시점에 걸린 entry들

  • threshold 여러개 설정도 가능

    { threshold : [0, 0.1, 0.2, .... ,1]}
    
    // → 10% 지점마다 옵저버 실행
    

참고

Intersection Observer API

Intersection Observer - 요소의 가시성 관찰

Lazy Loading

[지연로딩을 하는이유]

• 아까운 데이터 낭비 방지
• 브라우저 등 시스템의 리소스 낭비 방지
• 페이지의 초기로드 시간, 페이지 페이로드를 크게 줄인다
• 성능 향상에 관한 한 논쟁의 여지 없다

[생각해야 되는 경우]