Vue.js 画像の読み込みを検知する

Vue.js で画像の読み込みを検知する方法とそれを応用して画像読み込みまでにローディングを表示させるコンポーネントを紹介します。

# v-on:load

画像の読み込みを検知させる為に、検知させたいimgタグにv-on:loadを追加します。v-onディレクティブは@と省略して書けるので、@loadと書いても OK です。

<template>
  <div>
  	<img src="sample.jpg" @load="load" />
  </div>
</template>

<script>
export default {
  methods: {
    load() {
      // 画像読み込み後の処理
	  },
  },
}
</script>

# 画像の読み込みまでにローディングを表示する

画像の読み込みを検知することができたので、画像読み込みまでローディングを表示させてみます。

<template>
  <div>
    <div v-if="loading">
      image loading...
    </div>
  	<img src="sample.jpg" @load="load" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
    }
  },
  methods: {
    load() {
      this.loading = false
    },
  },
}
</script>

dataプロパティにloadingを追加し、画像の読み込みをハンドリングしています。
初期値をtrueに設定し、loading 中はimage loading...と表示させます。画像の読み込みが終わったところで、loadingをfalseに変更し、ローディングを非表示にさせてます。 しかし、こちらのコードをそのまま動かしても、実際は画像の読み込み自体が早くてローディングがほとんど表示されない、また文字表示だけのローディングでは味気ないので、次にもう少し実用的なサンプルコードを掲載します。

# サンプルコード

以下の codesandbox がサンプルコードになります。
ローディングは手軽にローディングの表示を実装できる vue-loading-template を使ってます。

vue-loading-template (opens new window)

画像の取得部分は、API での画像取得等を想定して、setTimeoutで 3 秒間遅延させてます。画像表示部分はコンポーネント化し、使い回しやすくしています。