PreLoading 资源预加载库


一个基于 PreloadJS 的轻量级资源预加载 TypeScript 库，支持图片、视频、音频等多种资源类型的预加载，并提供详细的加载进度回调。

✨ 特性

- 🚀 支持多种资源类型（图片、视频、音频等）
- 📊 实时加载进度监控
- 🔧 TypeScript 支持
- 📦 支持 ES6 模块和 CommonJS
- 🌐 兼容 IE 10+ 和现代浏览器
- ⚡ 可配置并发连接数
- 🎯 丰富的事件回调

📦 安装

``bash
npm install preloading
`

或者使用 yarn：

`bash
yarn add preloading
`

🚀 快速开始

$3

`typescript
import PreLoading from 'preloading'

const preloader = new PreLoading({
manifest: [
{ id: 'image1', src: './assets/image1.jpg' },
{ id: 'image2', src: './assets/image2.png' },
{ id: 'video1', src: './assets/video.mp4' }
],
handleOverallProgress: (e) => {
console.log(总进度: ${Math.floor(e.progress * 100)}%)
},
handleFileComplete: (e) => {
console.log('所有资源加载完成！')
}
})

// 开始加载
preloader.reload()
`

$3

`typescript
import PreLoading from 'preloading'

const preloader = new PreLoading({
// 资源清单
manifest: [
{ id: 'img1', src: './assets/image1.jpg' },
{ id: 'img2', src: './assets/image2.png' },
{ id: 'video', src: './assets/video.mp4' },
// 也可以直接使用字符串
'./assets/audio.mp3'
],

// 配置项
isXhr: true, // 使用 XHR 加载模式
maxConnections: 10, // 最大并发连接数

// 事件回调
handleFileLoad: (e) => {
console.log(文件加载完成: ${e.item.id})
},

handleOverallProgress: (e) => {
const progress = Math.floor(e.progress * 100)
console.log(总进度: ${progress}%)
// 更新进度条
document.querySelector('#progress').style.width = ${progress}%
},

handleFileProgress: (e) => {
const progress = Math.floor(e.progress * 100)
console.log(${e.item.id} 进度: ${progress}%)
},

handleFileError: (e) => {
console.error('文件加载失败:', e)
},

handleFileComplete: (e) => {
console.log('所有文件加载完成!')
},

loadStartCb: (manifest) => {
console.log('开始加载资源:', manifest)
}
})

// 开始预加载
preloader.reload()
`

📋 API 文档

$3

| 参数 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| manifest | Manifest | - | 必需。资源清单数组 |
| isXhr | boolean | true | 是否使用 XHR 加载模式 |
| maxConnections | number | 10 | 最大并发连接数 |
| handleFileLoad | function | - | 单个文件加载完成回调 |
| handleOverallProgress | function | - | 总体加载进度回调 |
| handleFileProgress | function | - | 单个文件加载进度回调 |
| handleFileError | function | - | 文件加载错误回调 |
| handleFileComplete | function | - | 所有文件加载完成回调 |
| loadStartCb | function | - | 开始加载时的回调 |

$3

资源清单支持两种格式：

1. 字符串格式：直接使用资源 URL
`typescript
manifest: ['./image1.jpg', './video.mp4']
`

2. 对象格式：提供更多配置选项
`typescript
manifest: [
{
id: 'image1', // 资源唯一标识
src: './image1.jpg', // 资源路径
type: 'image', // 资源类型 (可选)
loadTimeout: 30000 // 加载超时时间 (可选)
}
]
`

$3

| 方法 | 描述 |
|------|------|
| reload() | 开始/重新开始预加载 |
| loadFile(file) | 加载单个文件 |
| getResult(id) | 获取已加载的资源 |

$3

#### handleOverallProgress(e)
`typescript
{
progress: number, // 总体加载进度 (0-1)
loaded: number, // 已加载的字节数
total: number // 总字节数
}
`

#### handleFileProgress(e)
`typescript
{
progress: number, // 文件加载进度 (0-1)
loaded: number, // 已加载的字节数
total: number, // 总字节数
item: object // 当前加载的资源项
}
`

🌟 使用场景

- 游戏开发：预加载游戏资源（图片、音频、视频）
- 网页应用：优化首屏加载体验
- 移动端H5：减少资源加载等待时间
- 在线教育：课件资源预加载
- 电商网站：商品图片预加载

🔧 开发

`bash

安装依赖

``

📄 浏览器兼容性

- Chrome
- Firefox
- Safari
- Edge
- IE 10+

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📝 License

MIT © Your Name

🔗 相关链接

- PreloadJS 官方文档
- 演示页面