swiper-slide 에서 이미지 lazy 적용 > 테크게시판

Swiper-slide에서 페이지는 여러개인데 각 페이지의 이미지 용량이 클 경우

아래와 같은 방식으로 lazy 적용을 해 주면 된다.

<div class="swiper-slide"> 

    <img class="swiper-lazy" data-src="images/01.png"> 

    <div class="swiper-lazy-preloader"></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, // 미리 이미지를 모두 로드하지 않도록 설정

        watchSlidesVisibility: true // 슬라이드가 보일 때 이미지를 로드하도록 설정

    });

</script>