swiper 에 lazy 적용

Swiper.js에서 Lazy Loading을 적용하려면 슬라이드 내부의 <img> 태그에 class="swiper-lazy"  속성을 추가하고, data-src와 같은 속성에 실제 이미지 경로를 지정합니다. 이렇게 하면 현재 보이는 슬라이드 이미지와 다음 슬라이드 이미지만 먼저 로드되고, 사용자가 스크롤하며 다른 슬라이드로 이동할 때 해당 이미지만 로드되어 초기 로딩 속도와 성능을 개선할 수 있습니다.

 

Lazy Loading 적용 방법

1. swiper-lazy  class 추가: <img> 태그에 class="swiper-lazy" 속성을 추가하여 브라우저가 해당 이미지를 지연 로딩하도록 지시합니다.
2. data-src 속성 사용: 이미지의 실제 경로를 src 속성이 아닌 data-src 속성에 넣어둡니다. 

 

예시 코드 (HTML)

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- 이미지가 바로 로드되지 않고, 나중에 로드됨 -->
      <img data-src="path/to/image1.jpg" class="swiper-lazy" alt="Image 1">
    </div>
    <div class="swiper-slide">
      <!-- 이미지가 바로 로드되지 않고, 나중에 로드됨 -->
      <img data-src="path/to/image2.jpg" class="swiper-lazy" alt="Image 2">
    </div>
    <!-- 다른 슬라이드들 -->
  </div>
  <!-- 페이지네이션, 네비게이션 등 -->
</div>

 

<script>
    var swiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        autoHeight: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        lazy: {
            loadPrevNext: true,
        },
        preloadImages: false,
        watchSlidesProgress: true
    });
</script>

 

Lazy Loading 효과

• 성능 향상: 초기 로딩 시 불필요한 이미지들을 로드하지 않아 페이지 로딩 속도가 빨라집니다. 
• 대역폭 절약: 사용자에게 보이지 않는 이미지까지 미리 로드하지 않아 데이터 사용량을 줄일 수 있습니다. 
• 사용자 경험 개선: 사용자가 슬라이드를 넘길 때마다 필요한 이미지가 로드되므로, 원활하게 슬라이더를 이용할 수 있습니다. 

추가 팁

• <img> 태그에 class="swiper-lazy"와 같은 클래스를 추가하면 JavaScript로 DOM을 탐색하여 지연 로딩을 관리할 때 유용합니다.
• Swiper 자체에서 lazy 옵션을 제공할 수 있지만, 최신 브라우저의 loading="lazy" 속성을 사용할 수도 있다.
• 네트워크 탭을 통해 실제로 어떤 이미지가 로드되고 로드되지 않는지 확인하여 Lazy Loading이 잘 적용되고 있는지 확인할 수 있습니다. 
• 슬라이드가 보일 때 이미지를 로드하는 옵션이 버전에 따라 다를 수 있다.
  Swiper 8.x: watchSlidesVisibility: true
  Swiper 7.x: watchSlidesProgress: true