vue-lazyload插件官方文档地址 官方文档链接
1、首先是在vue项目中安装这个插件 使用命令 npm i vue-lazyload -S
2、在vue项目中的入口文件中将插件引入,即在main.js文件中引入并安装插件 ,并在Vue.use(VueLazyload,{})中配置参数 。
loading配置的是图片还在加载时的显示,我这里配置的是网上的一个加载图片
具体参数配置可以看一下官方文档 ,其实使用只需配置少量参数即可,其它的使用官方默认的配置,就可以了。
如图所示
3、配置好参数后,就可以到需要懒加载的页面中使用了,
使用命令v-lazy来懒加载图片
使用方式如下
做好这些,项目中的图片就是懒加载出来的了