Vue图片懒加载

1、问题

在vue项目中，如果图片是从服务器端加载到页面上，图片较大的时候，就会存在一部分一部分加载的情况，会显示非常卡顿，影响体验。

2、实现

（1）、图片懒加载

首先将图片的src链接设为一张我们已经准备好的图片（比如类似加载中的图片），并将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。这样就可以缓解服务器压力，并且提高用户体验。

（2）、安装vue-lazyload

npm i vue-lazyload -S

（3）、在main.js中引入

import VueLazyload from "vue-lazyload";
Vue.use(VueLazyload,{
    preLoad: 1.3,
    loading: require('../src/assets/loading.gif'),
    attempt: 1
})

其中../src/assets/loading.gif是我本地的正在加载图片gif路径。

3、查看效果

在LazyLoad.vue中引入一张网络图片，在浏览器中限制网速，模拟图片加载缓慢的情况。

LazyLoad.vue

<template>
  <div class="main">
    <img v-lazy=url1 alt="">
  </div>
</template>
<script>
export default {
  data (){
    return{
      url1: 'https://w.wallhaven.cc/full/pk/wallhaven-pkgkkp.png'
    }
  }
}
</script>

效果：
图片加载中：

图片加载完成：

常用参数：