確認環境

  • Vue.js: v2.6.7

方法

読み込み開始検知

  1. img タグの :src に展開する URL を変数化 ※1
  2. Vue.js 側の watch で1.の変数を監視 ※2

読み込み完了検知

  1. img タグに以下のイベントを追加 v-on:load="メソッド名" ※3
  2. Vue.js 側に1.で指定したメソッドを定義 ※4

実際のソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>画像の読み込みの開始および完了を検知する方法</title>
  </head>
  <body>
    <div id="app">
      <img :src="url" v-on:load="load" /> <!-- ※3 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          url: "https://raw.githubusercontent.com/vuejs/art/master/logo.png" // ※1
        },
        methods: {
          // ※4
          load: function() {
            console.log('loaded');
          },
        }
      });

      // ※2
      app.$watch('url', function(val, oldVal) {
        console.log(val);
      });
    </script>
  </body>
</html>

実行結果