Nuxt中使用vue-lazyload实现图片懒加载与高斯模糊效

网站中使用img标签可以展现图片，但是单纯用img展现图片在加载的过程中，会有点生硬，特别是在网络不好的时候，更是效果不佳，于是就有了图片懒加载插件，能让图片加载的时候能有一个很好的过渡效果。下面就简单介绍一下使用方法，包括总结一下自己在使用过程中遇到的一些坑。

一、安装vue-lazyload

#注意这个地方下载的是1.3.4版本，不跟版本会下载最新的版本，最新的版本会报错
#我也不知道什么原因，反正安装最新的会报错
npm i vue-lazyload@1.3.4 -S

二、在plugins目录里面新建vue-lazyload.js文件

1.文件代码

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'

//定义加载中的图片(如果用到的话可以用)
const loadimage = require('~/static/icons/common/loading.gif')
//定义加载图片出错的时候展现的图片
const errorimage = require('~/static/icons/common/picture-error.png')

Vue.use(VueLazyLoad, {
  preLoad: 1.33, //预加载高度比例
  error: errorimage, //加载失败时图像的src
  attempt: 2,//尝试计数次数
  throttleWait: 500,//节流等待时间(通过调节此值可以查看loading的效果，根据实际情况调节)
  filter: {
    progressive(listener, options) {
      // 实现渐近式加载图片（先加载模糊的图）
      listener.el.setAttribute('lazy-progressive', 'true')
      // 先加载模糊的图（这个地方是替换图片中的宽度与高度大小）
      let loadingUrl = listener.src.replace(/w_[0-9]+/g, 'w_5')
      loadingUrl = loadingUrl.replace(/h_[0-9]+/g, 'h_5')
      listener.loading = loadingUrl
    }
  }
})

2.形成高斯模糊的原理

• 通过filter配置进行加载拦截，将原先的大尺寸图片替换为小尺寸图片，在在图片loading阶段使用这个小尺寸图来展现就形成了模糊效果
• 例如：原图的链接是类似这样的：http://xxxx.com/xxx.png?x-image-process=image/resize,limit_0,m_fill,w_580,h_410
• 替换后：http://xxxx.com/xxx.png?x-image-process=image/resize,limit_0,m_fill,w_5,h_5
• 使用一个很小的图显示在原图尺寸大小图片中就会有模糊效果了，当然模糊效果好坏可以自行通过调节图片的截图大小（宽和高）来调整。

三、在nuxt.config.js中添加到plugins节点中

plugins: [
    { src: '@/plugins/vue-lazyload', ssr: false },
    //其他配置略
    ...
  ],

四、使用

<img  v-lazy="这里是图片的链接" />

五、效果

1.loading的时候

2.加载完成后

六、参考

vue-lazyload