web前端手册

vue-lazyLoad的使用以及避坑

2019-05-22  本文已影响2人  辉夜真是太可爱啦

图片懒加载可以极大程度的加快网页的加载速度,而且,使用非常简单,首先,安装插件

npm install vue-lazyload   --save

main.js中进行引用,代码如下:

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

将你原本的:src改为v-lazy即可,v-lazy写图片的网络路径,但是需要注意的是,必须加上key,并且你的key是要唯一的,不然可能造成图片不刷新的问题

<img v-lazy=" " :key=" " alt=" " />
上一篇下一篇

猜你喜欢

热点阅读