이미지 로딩을 위한 자바스크립트 Lazy Loading 백엔드 구현 방법

10 Nov 2023

javascript

이미지 로딩은 웹 페이지 성능을 향상시키는 데에 중요한 역할을 합니다. 특히, 많은 양의 이미지가 포함된 웹 페이지에서는 이미지 로딩이 느려질 수 있고 페이지의 로딩 시간도 증가할 수 있습니다. 이러한 문제를 해결하기 위해 “Lazy Loading” 기술을 사용할 수 있습니다. Lazy Loading은 사용자가 스크롤하는 동안 이미지를 로드하는 것이 아니라 사용자가 이미지를 보기 직전에 로드하는 방식입니다. 이를 통해 초기 페이지 로딩 속도를 향상시킬 수 있습니다.

이번 포스트에서는 자바스크립트를 사용한 Lazy Loading의 백엔드 구현 방법을 알아보겠습니다.

구현 방법

이미지 요소에 대한 데이터 속성 추가

먼저, 이미지 태그에 로드할 이미지의 URL을 저장하기 위한 데이터 속성을 추가해야 합니다. 일반적으로 data-src 속성을 사용합니다. 이 속성에는 실제로 이미지를 로드해야 할 때 사용할 이미지 URL이 포함됩니다.
```
<img data-src="path/to/image.jpg" alt="Image">
```

스크롤 이벤트 리스너 추가

스크롤 이벤트를 감지하여 사용자가 화면에 이미지가 보일 때 이미지를 로드하는 로직을 추가해야 합니다. 아래는 기본적인 스크롤 이벤트 리스너의 구현 예시입니다.

window.addEventListener('scroll', function() {
  // 로드할 이미지 요소 선택
  var lazyImages = document.querySelectorAll('img[data-src]');

  // 사용자가 화면에 보이는 경우 이미지 로드
  lazyImages.forEach(function(img) {
    if (isElementInViewport(img)) {
      img.setAttribute('src', img.dataset.src);
      img.removeAttribute('data-src');
    }
  });
});

뷰포트에 이미지 요소가 보이는지 확인하는 함수 추가

이미지가 보이는지 확인하기 위해 뷰포트에 이미지 요소가 위치하는지 확인하는 함수가 필요합니다. 아래는 가장 기본적인 방법으로 뷰포트에 요소가 보이는지 확인하는 함수입니다.

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();

  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

마무리

이 자바스크립트 Lazy Loading 백엔드 구현 방법을 사용하면 이미지 로딩 속도를 향상시킬 수 있고 페이지의 로딩 속도를 개선할 수 있습니다. 이를 통해 사용자 경험을 향상시키고 사용자들에게 더 나은 웹 페이지를 제공할 수 있습니다.

#lazyloading #javascript

참고자료:

MDN 공식 문서: Intersection Observer API