vue-lazyload 简易上手教程

                                                                        

1) 在项目中安装依赖

$ npm install vue-lazyload -D

2) main.js 中加入vue-laryload 相关代码

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
 
new Vue({
  el: 'body',
  components: {
    App
  }
})

     error:加载失败后图像的src

     loading：加载时图像的src

     preLoad：预加载高度的比例

     attempt：计数

3）template 模板中使用语法   【后台返回数据使用方法】     方法1

4）使用 v-lazy-container 原始HTML 【图片是本地的，或是网络图片】 方法2

< div v-lazy-container = “ {selector：'img'，error：'xxx.jpg'，loading：'xxx.jpg'} ” > 
  < img data-src = “ //domain.com/img1.jpg ” > 
  < img data-src = “ //domain.com/img2.jpg ” > 
  < img data-src = “ //domain.com/img3.jpg ” >   

  error和loading 的图像可以自定义 

  selector：固定必选参数，img

 

  更多详细信息请详见：https://www.npmjs.com/package/vue-lazyload