vue.jsでlazyload

メモ

カスタムディレクティブでlazyloadの処理を定義する
以下を参考に
https://jp.vuejs.org/v2/cookbook/creating-custom-scroll-directives.html

import Vue from 'vue'

Vue.directive('lazyload', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (window.scrollY + window.innerHeight > el.offsetTop) {
        el.setAttribute('src', binding.value)
        window.removeEventListener('scroll', f)
      }
    }
    window.addEventListener('scroll', f)
    f()
  }
})

imgタグに設定する

<template>
  <div>
    <template v-for="src in imageList">
      <img src="~/assets/images/loading.gif"
        v-lazyload="src"
      >
    </template>
  </div>
</template>