关于vue图片简单懒加载

在一些图片比较多的网站会用到 图片懒加载 技术，这项技术可以延迟加载图像，只当图片出现在我们看到的视图中才加载，它的好处是大大提高用户体验，节省不必要的资源浪费以及网站的性能提升等
或者当网络请求比较慢的时候，提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在-块，或显示大片空白,让用户体验更好一点。

那么在使用vue框架进行前端开发如何快速使用图片懒加载呢？

vue-lazyload

已经有前辈们为我们封装好了一个现成的插件，就等着我们使用呢，简单三部曲走起。

第一步，安装

npm install vue-lazyload --save

第二步，加载

在mian.js文件中进行加载

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import VueLazyload from 'vue-lazyload'
//使用图片懒加载
Vue.use(VueLazyload, {
//添加占位图，这里可以传入很多参数，见下图
	loading:require('./assets/imgs/common/placeholder.png')
})

第一三步，使用

在入口文件添加后，在组件任何地方都可以直接使用把img里的:src-> v-lazy，如下

		<!-- <img :src="showImage" alt=" " @load="imageLoad"/> -->
		<img v-lazy="showImage" alt=" " @load="imageLoad"/>