vue-lazyload图片懒加载

vue 2 使用  vue-lazyload 不要安装最新版本；最新版本会出现不显示图片的问题，要安装1.3.3版本；

npm i vue-lazyload@1.3.3 -S

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {

  preLoad: 1.3, // 设置预加载距离，单位是倍数，例如 1.3 表示当元素距离可视区域顶部还有 1.3 倍自身高度时开始加载。

  observer: true, // 启用 MutationObserver

  observerOptions: {

    rootMargin: '0px', // 观察器的根边界

    threshold: 0.1, // 观察器的阈值

  },

})

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

 加载两次，是因为浏览器控制台开了禁止缓存