자바스크립트 Lazy Loading을 활용한 웹사이트의 사전 로딩 방법

10 Nov 2023

javascript

웹사이트의 로딩 속도는 사용자 경험에 매우 중요한 영향을 미칩니다. 느린 로딩 속도는 사용자들이 사이트를 떠날 가능성을 높이고 검색 엔진의 순위에도 영향을 미칠 수 있습니다. 이러한 이유로, 웹사이트 개발자들은 로딩 속도를 최적화하기 위해 다양한 기술과 방법을 사용해야 합니다. 이 중 하나는 자바스크립트 Lazy Loading입니다. 이 기술은 웹사이트의 이미지, 스크립트, 스타일시트 등을 필요할 때만 로딩하여 초기 페이지 로딩 시간을 줄이는 것입니다.

Lazy Loading이란?

Lazy Loading은 웹사이트 요소들을 필요한 시점에만 동적으로 로딩하는 기술입니다. 이를 통해 초기 로딩 시간을 줄이고 사용자가 스크롤링하거나 다른 상호작용을 할 때만 필요한 데이터를 로딩할 수 있습니다. 예를 들어, 사용자가 웹사이트를 처음 방문했을 때 모든 이미지를 로딩하는 것이 아닌, 스크롤을 내릴 때마다 보이는 이미지만 로딩한다면 초기 로딩 시간을 크게 단축시킬 수 있습니다.

자바스크립트 Lazy Loading 구현하기

자바스크립트 Lazy Loading을 구현하는 방법은 간단합니다. 우선, 이미지 혹은 다른 요소를 로딩하기 전에 기본적으로 보여줄 placeholder를 생성합니다. 이후, 사용자가 해당 요소를 보여주게 될 때 IntersectionObserver를 사용하여 실제 요소를 로딩합니다.

아래는 자바스크립트를 사용하여 이미지 Lazy Loading을 구현하는 예시 코드입니다.

// IntersectionObserver의 콜백 함수
const handleIntersection = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.getAttribute('data-src');
      img.setAttribute('src', src);
      observer.unobserve(img);
    }
  });
};

// IntersectionObserver 생성
const observer = new IntersectionObserver(handleIntersection);

// 모든 이미지에 observer 등록
const images = document.querySelectorAll('img[data-src]');
images.forEach(img => {
  observer.observe(img);
});

위 코드에서 IntersectionObserver는 요소가 화면에 보여질 때 콜백 함수를 실행합니다.

참고 자료

#웹개발 #로딩속도