Vue中实现图片懒加载
首先我们在写页面的时候要考虑到优化的时候,这样我们在页面图片特别多的情况下要渲染图片的时候,如果网络不是特别好,图片加载不出来,会导致图片那一块是空白的,这样的用户体验是特别不好的
所以就有了图片懒加载
那我们在vue的脚手架里面怎么使用图片懒加载呢?
我们可以使用vue的vue-lazyload插件
话不多说上代码!
- 首先我们需要先安装插件
npm install vue-lazyload --save
或者可以使用yarn
yarn add vue-lazyload --save
- 在main.js里引入
import VueLazyload from 'vue-lazyload'
这里我们可以直接使用
Vue.use(VueLazyload)
或者可以使用自定义
Vue.use(VueLazyload, {
preLoad: 1.3,//页面预加载
error: 'dist/error.jpg',//加载失败图片
loading: 'dist/loading.gif',//加载中的图片
attempt: 1//尝试计数
})
这些都是在main.js中写的
写完之后我们引用的时候就是
<img v-lazy="引入的图片路径" alt=""/>