[Lazyloading]

지연로드

• 리소스를 필요할 때만 로드하는 것!
• 이미지가 많은 화면 접속시 유용하다.

Intersection Observer API

• 뷰포트의 교차점에서 변경 사항을 비동기식으로 관찰하는 방법을 제공하는 API
  => 이미지를 전체로딩하는 것이 아니라 현재 사용자가 보고있는 화면의 이미지를 로드하는 방식(스크롤을 할 때 필요한 이미지를 그때그때 로드하는 방식!)
• 활용
  1) 이미지 lazy loading
  2) infinite-scroll
  3) 배너 & 광고 노출 여부 확인
• chrome 51, safari 12.2 부터 지원

infinite-scroll & IntersectionObserver 를 구현한 소스코드

https://github.com/yeoj1n/vanilaJS-study/tree/master/IntersectionObserver

loading = "lazy" 로드 속성

• 근처에 사용자가 스크롤 할 때까지 화면이 꺼져 이미지/iframe 로딩을 지연시킬 수 있다.
• chrome 77 부터 지원, safari X

<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

참고

https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver