vue插件中使用图片懒加载vue-lazyload

插件vue-lazy-load-img

一、安装

npm install --save-dev lazy-load-img vue-lazy-load-img

二、用法

import Vue from 'vue'
import VueLazyLoadImg from 'vue-lazy-load-img'

Vue.use(VueLazyLoadImg)

<vue-lazy-load-img 
    mode="diy"
    :time="300"
    :done="true"
    :position="{ top: 0, right: 0, bottom: 0, left: 0 }"
    :diy="{ backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center center' }"
    @before="before" 
    @success="success" 
    @error="error">
    <img src="./images/default.png" data-src="./images/test.png" alt="">
</vue-lazy-load-img>

插件vue-lazyload

一、安装

npm i vue-lazyload -D

二、用法
main.js 在入口文件

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'  //引入这个懒加载插件

Vue.use(VueLazyload)

// 或者添加VueLazyload 选项
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

new Vue({
  el: 'body',
  components: {
    App
  }
})

参数选项说明