JavaScript
vue.js
lazyload

Vue.jsでlazyloadを実装

More than 1 year has passed since last update.

意外に自作するコードが少なかったので、書いてみました。

ソース

<div id="vue-instance">
  <img src="loading.gif">// ローディング画像
  <img src="hoge.jpg" v-on:load="hideLoading">// 表示させたい画像
</div>
var vm = new Vue({
  el: '#vue-instance',
  methods: {
      hideLoading: (event) => {
        event.target.previousElementSibling.remove();
      }
    }
});

画像がロードされたタイミングでメソッドを呼び出してそこで
ローディング画像を削除していま