如何使用图片懒加载?

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

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就可以实现懒加载的效果。

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容