@bluesyoung/nuxt3-lazy-load

nuxt3 资源懒加载

English

🚀 特性

• 🌠 图片懒加载
• 🎧 音频懒加载
• 📀 视频懒加载
• 🖼️ 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': {}
}

📝 配置项

类型	默认值	说明
images	true	启用图片懒加载
audios	true	启用音频懒加载
videos	true	启用视频懒加载
iframes	true	启用 iframe 懒加载
native	false	仅使用原生的 loading="lazy"
directiveOnly	false	仅使用指令，启用之后会覆盖之前的配置
defaultImage	''	默认占位图
loadingClass	isLoading	加载时的类名
loadedClass	isLoaded	加载完成时的类名
appendClass	lazyLoad	追加的类名
observerConfig	{}	IntersectionObserver 的额外配置
OSSProvider	aliyun	oss 托管服务商，可选值：aliyun、tencent、qiniu、baidu、163yun、huawei，选中对应的值，会自动添加对应的图片处理参数(转换为 75% 的 webp)
OSSProcess	非必须参数	1. 不配置则使用服务商配置 2. 传递字符串默认使用传入值进行处理无需 ? 3. 传递 false 则关闭基于 oss 的图片处理功能 4. 单独处理某个元素，设置元素属性： data-image-process="具体服务商的查询参数", 优先级更高

📝 使用示例

全部使用默认配置

• 正常使用即可，无需刻意修改代码，默认全部懒加载

部分内容不使用懒加载

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

自定义指令

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

灵感来源

nuxt-lazy-load

原仓库没有使用 ts，导致在实际使用中类型提示有问题，因此 fork 了该仓库，并进行了部分修改