이미지는 웹 페이지에서 중요한 요소 중 하나입니다. 그러나 많은 이미지를 한 번에 로드하면 페이지의 로딩 속도가 늦어지고 사용자 경험이 저하될 수 있습니다. 이를 개선하기 위해 Lazy Loading이라는 기술을 사용할 수 있습니다. 이 기법은 사용자가 스크롤링하는 동안 보이는 이미지만 로드하여 로딩 시간을 줄여줍니다.

Lazy Loading이란?

Lazy Loading은 사용자가 접근하지 않는 부분의 이미지를 미리 로드하지 않고 필요할 때만 로드하는 기술입니다. 즉, 웹 페이지를 처음으로 열었을 때 모든 이미지를 로드하지 않고, 사용자가 해당 이미지를 볼 수 있는 범위로 스크롤링함에 따라 이미지를 로드합니다. 이로써 초기 로딩 시간을 줄이고 사용자 경험을 향상시킬 수 있습니다.

자바스크립트 Lazy Loading 구현 방법

자바스크립트를 사용하여 Lazy Loading을 구현하는 방법은 다양합니다. 대표적인 방법 중 하나는 Intersection Observer API를 이용하는 것입니다. Intersection Observer는 요소와 viewport 사이의 교차점을 관찰하고 있을 때 자동으로 콜백 함수를 실행하는 API입니다.

const images = document.querySelectorAll('img[data-src]');

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

const loadImage = (image) => {
  image.src = image.dataset.src;
  image.onload = () => {
    image.removeAttribute('data-src');
  };
};

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      loadImage(entry.target);
      observer.unobserve(entry.target);
    }
  });
}, options);

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

위 코드는 이미지 요소의 data-src 속성을 이용하여 실제 이미지의 경로를 나타내고, Intersection Observer를 이용하여 이미지가 viewport에 들어왔을 때 로딩하는 예제입니다. 이미지가 로드되면 data-src 속성을 제거하고, observer를 unobserve하여 더 이상 관찰하지 않도록 합니다.

Lazy Loading의 장점

Lazy Loading을 적용하면 다음과 같은 장점을 얻을 수 있습니다:

• 초기 로딩 시간을 줄일 수 있어 사용자 경험을 향상시킵니다.
• 대량의 이미지를 포함한 웹 페이지의 로딩 속도를 개선합니다.
• 사용자가 스크롤링하는 동안 이미지를 로드하여 네트워크 트래픽을 절약합니다.

Lazy Loading은 웹 페이지의 이미지 로딩 속도를 향상시키기 위한 강력한 자바스크립트 기법입니다. 적절히 구현하면 웹 페이지의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.

#javascript #webperformance