vue2实现图片懒加载

懒加载：通俗地讲就是需要用到图片的时候再去加载图片，好处在于能够减少服务器的压力,在网络比较慢的情况下，可以提前给这张图片添加一个占位图片，来提高用户的体验。

一、安装vue-lazyload插件

npm install vue-lazyload --save-dev

二、在main.js中引入

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

Vue.config.productionTip = false

// 引入插件
import VueLazyload from 'vue-lazyload'

// 注册插件
Vue.use(VueLazyload,{
  loading:'' // 懒加载默认图片
})

new Vue({
  render: h => h(App),
}).$mount('#app')

 自定义配置插件：

Vue.use(VueLazyload, {
	preLoad: 1.3,
	error: '../src/assets/image/error.png',
	loading: '../src/assets/image/loading.gif',
	attempt: 1
})

preLoad：表示lazyload的元素,距离页面底部距离的百分比，计算值为(preload - 1)，默认值为1.3
error: 表式加载失败展示的图片，需要传入一个字符串作为解析
loading：表式加载成功展示的图片，需要传入一个字符串作为解析
attempt：图片加载失败后的重试次数，需要传入一个数字

三、修改图片为懒加载

<img v-lazy="lazyImg" class="lazy" />

但是我这样写了之后图片显示不出来了，但是能拿到图片地址，后来查找资料发现，在div包着img的情况下，要用data-src 来指定路径，不能用v-lazy了，要在div上面添加 v-lazy-container=“{ selector: ‘img’ }”

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="">
</div>