vue + vue-lazyload 实现图片懒加载

1.安装

1	npm i vue-lazyload -S

2.配置 main.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/***图片模板等懒加载 start ***/ import  VueLazyload from  'vue-lazyload' // 404图片 import  errImg from  './assets/img/404.png' // loading图片 import  loadingImg from  './assets/img/loading-spin.svg'   // 图片懒加载配置 Vue.use(VueLazyload, {    preLoad: 1.3,  // 预加载高度比例    error: errImg,  // 图片路径错误时加载图片    loading: loadingImg,  // 预加载图片    attempt: 1,  // 尝试加载图片数量    // set observer to true    observer:  true ,    // optional    observerOptions: {      rootMargin:  '0px' ,      threshold: 0.1    } }) /***图片模板等懒加载 end ***/

3.调用

1 2	<!-- 图片懒加载--> < img  v-lazy="picUrl" />