vue图片懒加载

什么是图片懒加载，通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张设置好的图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。比如一个页面中有很多图片，如果一上来就发送这么多请求，页面加载就会很漫长。

图片懒加载不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前。
一、vue-lazyload插件实现：
　1、安装vue-lazyload
　　 npm i vue-lazyload --S
2、在main.js配置文件引入

3、使用，将img标签的src换成v-lazy

4、如果在不同的页面中显示不同的加载占位图，写法如下

5、背景图也可以使用懒加载，绑定
v-lazy:background-image="{src: item.imgUrl, error: ‘http://xx.com/error.png’, loading: ‘http://xx.com/loading.png’}"
二、element-ui实现：
< el-image fit=“cover” :src=“item.src”>

< el-image fit=“cover” :src=“src” lazy=“true”>

< el-image fit=“cover” :src=“src” lazy=“true”>