Vue中实现图片的懒加载

vue项目中实现图片懒加载的方法

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

实现方法(使用vue的vue-lazyload插件)

1.安装插件

npm install vue-lazyload --save-dev

2.在入口文件main.js中引入并使用

import VueLazyload from 'vue-lazyload'

在入口文件main.js中直接使用

Vue.use(VueLazyload)

或者可以自己添加自定义的选项

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})

复制代码
3.修改图片显示方式为懒加载（将 :src 属性直接改为v-lazy）