Vue 프로젝트 Vue 플러그인 (이미지 로드 이벤트)

 

예제

 

 

Vue 프로젝트 Vue 플러그인 (이미지 로드 이벤트)

 

1. /src/plugins 생성, /src/plugins/loadImage.js 생성

export default {
  install(app) {
    app.config.globalProperties.$loadImage = src => {
      return new Promise(resolve => {
        const img = document.createElement('img')
        img.src = src
        img.addEventListener('load', () => {
          // 완료!
          resolve()
        })
      })
    }
  }
}

 

2. /src/main.js 수정

- loadImage.js 플러그인 등록

import { createApp } from 'vue'
import App from './App.vue'
/* index.js 생략 가능 */
import router from './routes'
import store from './store'
import loadImage from './plugins/loadImage'

/* .use() 특정한 플러그인 연결 */
createApp(App)
  .use(router) // $route, $router
  .use(store) // $store
  .use(loadImage) // $loadImage
  .mount('#app')

 

3. /src/components/MovieItem.vue 수정

- data() 추가

- methods 추가

- Loader 컴포넌트 가져오기

- 템플릿 Loader 삽입

- mounted() 추가

<template>
  <div
    :style="{ backgroundImage: `url(${movie.Poster})` }"
    class="movie">
    <Loader 
      v-if="imageLoading"
      :size="1.5"
      absolute />
...

<script>
import Loader from '~/components/Loader'

export default {
  components: {
    Loader
  },
  props: {
    ...
  },
  data() {
    return {
      imageLoading: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      await this.$loadImage(this.movie.Poster)
      this.imageLoading = false
    }
  }
}
</script>
...

 

4. /src/routes/Movie.vue 수정 (Movie 카테고리 포스터 이미지 로드 이벤트 추가)

- data() 추가

- requestDiffSizeImage() 수정

- position 값 추가

...
      <div
        :style="{ backgroundImage: `url(${requestDiffSizeImage(theMovie.Poster)})` }"
        class="poster">
        <Loader 
          v-if="imageLoading"
          absolute />
      </div>
...

...
  data() {
    return {
      imageLoading: true
    }
  },
  ...
  methods: {
    requestDiffSizeImage(url, size = 700) {
      const src = url.replace('SX300', `SX${size}`)
      this.$loadImage(src)
        .then(() => {
          this.imageLoading = false
        })
      return src
    }
  }
...

...
  .poster {
    ...
    position: relative;
  }
...

 

결과

 

---

 

참고

https://v3.vuejs.org/guide/plugins.html#writing-a-plugin

Plugins | Vue.js