이미지 로딩은 웹 페이지 성능에 큰 영향을 미치는 요소 중 하나입니다. 특히 대용량의 이미지 파일을 로딩해야 하는 경우, 사용자 경험에 부정적인 영향을 주곤 합니다. 하지만 이를 해결하기 위해 자바스크립트 Lazy Loading 기법을 사용할 수 있습니다. Lazy Loading은 사용자가 스크롤을 내리거나 클릭하면 이미지가 로드되는 것이 아니라, 사용자가 해당 이미지를 실제로 보기 직전에 비로소 이미지를 로드하는 기법입니다. 이를 통해 초기 페이지 로딩 속도를 개선하고, 사용자 경험을 향상시킬 수 있습니다.

Lazy Loading의 작동 방식

1. 웹 페이지가 로드될 때, 모든 이미지 태그의 src 속성에 실제 이미지 URL을 넣는 대신, data-src 속성에 이미지 URL을 저장합니다.
2. 사용자가 스크롤을 내리거나 클릭하여 해당 이미지를 보여줄 때, 자바스크립트가 data-src 속성의 값을 src 속성으로 복사합니다.
3. 이미지의 src 속성이 변경되면, 해당 이미지가 로드되고 화면에 표시됩니다. 이때, 매끄러운 애니메이션 효과를 제공합니다.

Lazy Loading 라이브러리 사용 예시

다음은 이미지 Lazy Loading을 쉽게 구현할 수 있는 Lozad.js 라이브러리를 사용하는 예시입니다. Lozad.js는 가볍고 간단한 Lazy Loading 라이브러리로, 이미지뿐만 아니라 다른 요소들의 Lazy Loading에도 적용할 수 있습니다.

// Lozad.js 라이브러리 로드
<script src="https://cdn.jsdelivr.net/npm/lozad@1.14.0/dist/lozad.min.js"></script>

// Lazy Loading 적용
<script>
  // Lazy Loading이 적용될 이미지 태그를 선택합니다.
  const images = document.querySelectorAll('.lazy');

  // Lazy Loading 설정
  const observer = lozad(images, {
    rootMargin: '200px', // 이미지가 화면에 나타나기 전에 로드될 거리
    threshold: 0.1, // 이미지가 화면에 얼마나 보여지는지 판단하는 기준값
    loaded: function(el) {
      el.classList.add('fade'); // 이미지가 로드되면 fadeIn 효과를 적용합니다.
    }
  });

  // 감시 시작
  observer.observe();
</script>

위 예시의 lozad 함수는 Lazy Loading을 적용할 이미지 태그를 선택하고, 옵션을 설정합니다. rootMargin은 이미지가 화면에 나타나기 전에 로드될 거리를 지정하고, threshold는 이미지가 얼마나 보여졌다고 판단할지를 설정합니다. loaded 콜백 함수에서는 이미지가 로드되면 추가적인 애니메이션 효과를 적용할 수 있습니다.

결론

Lazy Loading을 사용하여 이미지 로딩 시 매끄러운 애니메이션 효과를 제공할 수 있습니다. 이를 통해 초기 페이지 로딩 속도를 개선하고, 사용자 경험을 향상시킬 수 있습니다. Lozad.js와 같은 Lazy Loading 라이브러리를 사용하면 간편하게 구현할 수 있으며, 다양한 옵션을 설정하여 원하는 효과를 추가할 수 있습니다.

#WebDevelopment #LazyLoading