如何使用图片懒加载？

在项目中我们可能会使用到图片懒加载，可是怎么实现呢？其实非常简单，我们来学习一下！

1、下载依赖

npm install vue-lazyload --save

2、引入

import VueLazyLoad from 'vue-lazyload';

在项目中的main.js引入并且配置

3、配置

Vue.use(VueLazyLoad,{

    error:require('./assets/success.gif'),

    loading:require('./assets/fail.gif')

});

4、使用

总结：在使用时，我们只需将原来的：src属性换成v-lazy就可以实现懒加载的效果。

图片懒加载，其实就是在数据还没有加载完成的时候，我们先使用本地图片加载到页面中等待所需图片的加载，这样布局不会受到影响，用户体验也是非常良好的。