[vue] lazyload 사용하기

페이지에 이미지가 많을 경우 하나의 페이지를 호출할 때 모든 이미지를 호출하도록 한다면 그 페이지는 로딩 속도가 매우 느릴 수 있습니다.

 

cdn으로 호출한다고 해도 용량이 큰 이미지가 많이 호출 될 경우 느릴수있습니다.

 

그래서 페이지 로딩 시 경량화 이미지 혹은 이미지를 호출하지 않고 이미지가 있는 영역에 갔을 때 로드될 수 있도록 하는 기능이 lazyload 입니다.

 

설치부터 사용방법까지 작성해봅니다.

 

1. 설치

npm install vue-lazyload --save

 

2. 사용방법

- main.js 에 라이브러리 로드

// lazyload 라이브러리 로드
import VueLazyload from 'vue-lazyload';

// vue app 에 VueLazyload 사용
app.use(VueLazyload, {
    preLoad: 1, // 미리 로드할 이미지의 비율 설정
    // error: 'error.jpg', // 이미지 로드 실패 시 표시할 이미지
    // loading: 'loading.gif', // 이미지 로딩 중 표시할 이미지
    attempt: 1 // 이미지 로딩 시도 횟수
})

- vue 파일에서 사용하기

<!-- 이미지 태그에 src 대시 v-lazy 사용 -->
<img v-lazy="imageUrl" alt="Logo" class="w-14" />

 

위와 같이 진행 후 개발자모드를 통해 이미지 호출 되는 부분을 확인하면 

이미지가 일괄적으로 로드되지 않고 해당 영역에 도착하면 이미지가 호출 됩니다.