이미지, 배경이미지의 지연 로드 구현 방법 (with. intersectionObserver API)
1. 들어가기에 앞서각 서비스에는 랜딩 페이지가 존재하며, 랜딩 페이지들은 대개 고화질의 이미지를 사용한다.사용자가 페이지에 처음 방문했을 때, 페이지의 처음부터 끝까지 스크롤할 수 있지만, 일부는 첫 화면만 보고 다른 탭으로 이동하기도 한다. 그래서 랜딩 페이지의 모든 고화질 이미지를 한꺼번에 로드한다면, 리소스 낭비가 발생한다.그럼, 어떻게 해야 리소스 낭비를 줄일 수 있을까? 사용자가 접근하지 않은 이미지는 로드하지 않을 수 없을까? 바로 지연 로드 방식을 사용하면 된다! 지연 로드는 사용자가 이미지를 볼 때까지 이미지 로드를 미루는 기법이다. 이 기법을 사용하면 초기 로드 시간을 단축하고, 불필요한 리소스 사용을 줄일 수 있다.이번 시리즈에서는 “(1) JavaScript의 Intersection..
2024. 5. 30.
