Nuxt3 资源懒加载插件nuxt3-lazy-load的安装及使用

发布日期 2024-01-09 14:30:47 已于 2024-01-09 14:46:16 修改

插件特性

  • 🌠 图片懒加载
  • 🎧 音频懒加载
  • 📀 视频懒加载
  • 🖼️ iframe 懒加载
  • ✨ 基于 oss 托管服务商的图片处理能力


安装

npm i @bluesyoung/nuxt3-lazy-load -D
yarn add @bluesyoung/nuxt3-lazy-load -D
pnpm add @bluesyoung/nuxt3-lazy-load -D


使用

// nuxt.config.ts
{
  modules: [
    // 模块注册
    '@bluesyoung/nuxt3-lazy-load'
  ],
  // 详细配置,全部可选,配置项见下表
  '@bluesyoung/nuxt3-lazy-load': {}
}


配置项

类型默认值说明
imagestrue启用图片懒加载
audiostrue启用音频懒加载
videostrue启用视频懒加载
iframestrue启用 iframe 懒加载
nativefalse仅使用原生的 loading="lazy"
directiveOnlyfalse仅使用指令,启用之后会覆盖之前的配置
defaultImage''默认占位图
loadingClassisLoading加载时的类名
loadedClassisLoaded加载完成时的类名
appendClasslazyLoad追加的类名
observerConfig{}IntersectionObserver 的额外配置
OSSProvideraliyunoss 托管服务商,可选值:aliyuntencentqiniubaidu163yunhuawei,选中对应的值,会自动添加对应的图片处理参数(转换为 75% 的 webp)
OSSProcess非必须参数1. 不配置则使用服务商配置
2. 传递字符串默认使用传入值进行处理无需 ?
3. 传递 false 则关闭基于 oss 的图片处理功能
4. 单独处理某个元素,设置元素属性: data-image-process="具体服务商的查询参数"优先级更高


使用示例

1、全部使用默认配置,正常使用即可,无需刻意修改代码,默认全部懒加载

2、部分内容不使用懒加载

<img data-not-lazy src="https://img.yzcdn.cn/vant/logo.png" />


3、自定义指令

  • v-lazy-load
  • v-pre-load="true/false" 是否与加载对应的图片
  • v-not-lazy

官方源

年末感恩回馈