이번 포스트에서는 자바스크립트의 Lazy Loading에 대해 알아보겠습니다. 만약 여러분이 웹 개발을 하고 있다면 이미지 또는 스크립트 파일과 같은 리소스를 로딩할 때 성능의 이슈를 경험한 적이 있을 것입니다. 이런 문제를 해결하기 위해 Lazy Loading이라는 개념이 등장했는데요, 지금부터 알아보도록 하겠습니다.

Lazy Loading이란?

전통적인 로딩 방식은 페이지가 로딩될 때 모든 리소스를 동기적으로 로드합니다. 예를 들어, 페이지에 많은 이미지가 포함되어 있다면, 이미지들은 페이지 로딩 시간을 지연시키고 사용자가 원하는 콘텐츠를 빠르게 볼 수 없게 만듭니다.

Lazy Loading은 이러한 문제를 해결하기 위해 필요한 리소스들을 필요한 시점에 동적으로 로드하는 방식입니다. 예를 들어, 사용자가 스크롤을 내리면서 페이지에 표시되는 이미지만 로드하게 되어 페이지 로딩 속도를 향상시킬 수 있습니다.

자바스크립트를 사용한 Lazy Loading 구현

자바스크립트를 사용하여 Lazy Loading을 구현하는 방법에는 몇 가지가 있습니다. 일반적으로는 Intersection Observer API를 사용하여 스크롤 이벤트를 감지하고, 필요한 리소스를 동적으로 로드합니다.

const images = document.querySelectorAll('.lazy-load-img');

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.1
};

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      const src = image.getAttribute('data-src');

      image.setAttribute('src', src);
      observer.unobserve(image);
    }
  });
};

const observer = new IntersectionObserver(callback, options);

images.forEach(image => {
  observer.observe(image);
});

위 코드에서는 IntersectionObserver를 사용하여 lazy-load-img 클래스를 가진 이미지를 감시하고, 이미지가 화면에 나타나면 이미지의 src 속성을 로드하도록 설정합니다.

결론

Lazy Loading은 웹 페이지의 성능 향상을 위한 중요한 기술입니다. 자바스크립트를 사용하여 Lazy Loading을 구현하면 페이지 로딩 시간을 줄이고 사용자 경험을 향상시킬 수 있습니다.

#webdevelopment #lazyloding