img

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

2024-05-09 0条评论 93次阅读 JavaScript


一、安装vue-lazyload

注意这个地方下载的是1.3.4版本,不跟版本会下载最新的版本,最新的版本会报错
我也不知道什么原因,反正安装最新的会报错

npm i vue-lazyload@1.3.4 -S

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

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
    }
  }
})

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

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

加载中

image.png

加载完成

image.png

来源于:https://www.jianshu.com/p/d0aadf5cdf57

💬 COMMENT


🦄 支持markdown语法

👋友