vue項目添加個全局的圖片懶加載(vue-lazyload)

npm：

npm i vue-lazyload -S

main.js：

import VueLazyload from 'vue-lazyload'


Vue.use(VueLazyload,{
    preLoad:0.5,
    //loading:require('./assets/loading.gif'),
    loading:'',
    attempt:2,
    listenEvents:['scroll'],
    filter: {
        index(listener, opts) {
            if (location.href.indexOf('index')>-1) {
                opts.ListenEvents = ['touchmove']        
            }
         }
    },
    observer: true,
    observerOptions:{ 
        rootMargin: '0px', 
        threshold: 0.1 ,
    }
})

正常使用：

<img v-lazy="imgUrl" />

可是當你想自定義每個圖片的loading效果的時候就不行了，翻看了幾遍官網才發現有可以解決的方法

<script>
export default {
  data () {
    return {
      imgObj: {
        src: 'http://xx.com/logo.png',
        error: 'http://xx.com/error.png',
        loading: 'http://xx.com/loading-spin.svg'
      },
      imgUrl: 'http://xx.com/logo.png' // String
    }
  }
}
</script> 
 
<template>
  <div ref="container">
     <img v-lazy="imgUrl"/>
     <div v-lazy:background-image="imgUrl"></div>
 
     <!-- with customer error and loading -->
     <img v-lazy="imgObj"/>
     <div v-lazy:background-image="imgObj"></div>
 
     <!-- Customer scrollable element -->
     <img v-lazy.container ="imgUrl"/>
     <div v-lazy:background-image.container="img"></div>
 
    <!-- srcset -->
    <img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w">
    <img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" />
  </div>
</template>

重點是下面這句，他可以直接識別你對象里面的src、error、loading：

<img v-lazy="imgObj"/>
<div v-lazy:background-image="imgObj"></div>