Intersection Observer API와 lozad.js 로 이미지 지연 로딩하기

이미지가 많은 웹사이트에서는 브라우저 화면상에 표시되지 않은 영역의 이미지의 로딩을 의도적으로 지연시켜서 네트워크 트래픽과 성능에 도움을 주는 방법을 많이 사용한다.

그런데 지연 로딩(lazy loading)이라고 불리는 이 기법을 구현하는 전통적인 방식에는 문제가 있다. 브라우저 스크롤 이벤트에 리스너를 붙여서 현재 스크롤의 위치와 getBoundingClientRect같은 API를 사용해서 얻은 엘레멘트의 위칫값을 주기적으로 비교해야 하기 때문이다.

최근 브라우저에 추가된 API인 Intersection Observer API를 사용하면 이처럼 리소스 소모가 많은 방식을 대체할 수 있다...