Vue List Image Lazy Loading 구현해보자

kay·2019년 8월 29일
2
post-thumbnail

1. Vue project 만들기

스크린샷 2019-08-29 오후 11.43.31.png

2. 이미지 리스트 컴포넌트 생성

  • ImageList.vue 생성
  • ImageItem.vue 생성

기본 세팅 Code 보기

3. 이미지 리스트 렌더링 해보기

  • 이미지를 보여줄려면 이미지가 필요하겠죠?
    https://picsum.photos/
    위 사이트 랜덤 이미지 URL을 활용 해보겠습니다.

스크린샷 2019-08-30 오전 12.16.30.png

4. 사용자 지정 디렉티브 만들기

  • ./src/directives/CustomDirective.js
  • ./src/directives/Index.js
  • vue directive에 대해서는 공식 사이트를 참고 해주세요
    https://kr.vuejs.org/v2/guide/custom-directive.html
  • 보통 저같은 경우는 Element에 접근할때 Directive를 만들어서 사용해요

스크린샷 2019-08-30 오전 12.37.25.png

  • 로그가 찍히는걸보니 잘 작동되고 하네요~

4. 100개 이미지 아이템 리스트 만들기

  • Lazy Loading을 구현하기 앞서 리스트를 만들어야겠죠?

  • v-for 디렉티브를 사용해서 구현합니다

    ./src/components/ImageList.vue

5. Lazy Load Directive 코딩

마무리

끝.

결과물 : https://drive.google.com/open?id=1gUA1e0qLkHez7pBQPYFptwSfmSebyRpm

github : https://github.com/KTH12/vue-lazy-loading-example

profile
개발자 ㅋ

0개의 댓글