vue.jsでlazyload

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>