Vueでloading indicatorを実装する

こんにちは

タイトル通りです

画像が重くて、表示がガクガクしたりすると、UX的に好ましくありません

そこでload中もアニメーションを加えるわけですね

今回はvue-spinnerを使います

では、早速

1. Vue のプロジェクトを作成

// terminal
vue create test-spinner
cd test-spinner
yarn serve

これでブラウザに初期画面が表示されるはず

2-1. vue-spinnerをインストール

// terminal
yarn add vue-spinner

2-2. vue-spinnerの登録

// src/App.vue

<script>
import PulseLoader from "vue-spinner/src/PulseLoader";
export default {
  name: 'app',
  components: {
    PulseLoader
  }
}
</script>

欲しいcomponentをimportして、componentsに登録するのみですね

vue-spinnerをviewに描写

ふつうのcomponentの書き方ですね

// src/App.vue

<div id="app">
  <pulse-loader></pulse-loader>
</div>

3 応用

冒頭でも述べたような、画像がload完了するまでspinnerを表示し、
loadが完了したのちに非表示にするというものを紹介します

3-1 なんかネットの画像を表示する

これでいいや

<div id="app">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  <pulse-loader></pulse-loader>
</div>

3-2 vue-spinnerのコンポーネントのプロパティを設定する

vue-spinnerのコードをみて見ると
propsでloadingというBoolean型の変数を受け取り、
v-showで表示、非表示を判定しているようですね
https://github.com/greyby/vue-spinner/blob/master/src/PulseLoader.vue

ということはこうなりますね

<div id="app">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg">    
  <pulse-loader :loading="true"></pulse-loader> // 表示される
  <pulse-loader :loading="false"></pulse-loader> // 非表示
</div>

3-3 画像がload完了したことを監視する

Vue.jsにはloadというイベントがあります
loadに登録したメソッドが、imageのload完了時に発火されます
したがって今回は、loadイベントにloadedというメソッドをバインドしておきます
このloadedイベントで、何かしたのフラグのtrue/falseを切り替えれば良さげです

<div id="app">
  <img @load="loaded" src="https://www.w3schools.com/w3css/img_lights.jpg">
  <pulse-loader :loading="true"></pulse-loader>
</div>

最終的にこんな感じになります
isLoadingの初期値をtrueにしておき、vue-spinnerを表示
imageのloadが完了したらloadイベントでloadedメソッドを発火
loadedメソッド内でisLoadingの値をfalseに切り替えてvue-spinnerを非表示

<template>
  <div id="app">
    <img @load="loaded" src="https://www.w3schools.com/w3css/img_lights.jpg">
    <pulse-loader :loading="isLoading"></pulse-loader>
  </div>
</template>

<script>
import PulseLoader from "vue-spinner/src/PulseLoader";
export default {
  name: 'app',
  components: {PulseLoader},
  data () {
    return {
      isLoading: true
    }
  },
  methods: {
    loaded () {
      this.isLoading = !this.isLoading
    }
  }
}
</script>

とても簡単ですね
何かの参考になれば幸いです

全国630店舗以上！もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】