Nuxt中使用vue-lazyload实现图片懒加载与高斯模糊效果
Sonder
2024-05-09
1098字
3分钟
浏览 (1.5k)
一、安装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](https://s2.loli.net/2024/05/09/eW5b1K7cHUtpxCO.png)
加载完成
![image.png](https://s2.loli.net/2024/05/09/MJjXFV7IxLOYD4p.png)