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=" " />