在项目中我们可能会使用到图片懒加载,可是怎么实现呢?其实非常简单,我们来学习一下!
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、使用
<img v-lazy="min.img">
总结:在使用时,我们只需将原来的:src属性换成v-lazy就可以实现懒加载的效果。
图片懒加载,其实就是在数据还没有加载完成的时候,我们先使用本地图片加载到页面中等待所需图片的加载,这样布局不会受到影响,用户体验也是非常良好的。