1.3.0 • Published 8 months ago
@bluesyoung/nuxt3-lazy-load v1.3.0
nuxt3 资源懒加载
🚀 特性
- 🌠 图片懒加载
- 🎧 音频懒加载
- 📀 视频懒加载
- 🖼️ 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
灵感来源
原仓库没有使用 ts,导致在实际使用中类型提示有问题,因此 fork 了该仓库,并进行了部分修改