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 了该仓库，并进行了部分修改