PreLoading 资源预加载库

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

✨ 特性

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

📦 安装

npm install preloading

或者使用 yarn：

yarn add preloading

🚀 快速开始

基本用法

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()

完整示例

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 文档

构造函数参数

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

Manifest 格式

资源清单支持两种格式：

1. 字符串格式：直接使用资源 URL

manifest: ['./image1.jpg', './video.mp4']

2. 对象格式：提供更多配置选项

manifest: [
  {
    id: 'image1',           // 资源唯一标识
    src: './image1.jpg',    // 资源路径
    type: 'image',          // 资源类型 (可选)
    loadTimeout: 30000      // 加载超时时间 (可选)
  }
]

实例方法

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

事件回调参数

handleOverallProgress(e)

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

handleFileProgress(e)

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

🌟 使用场景

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

🔧 开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

📄 浏览器兼容性

• Chrome
• Firefox
• Safari
• Edge
• IE 10+

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📝 License

MIT © Your Name

🔗 相关链接

• PreloadJS 官方文档
• 演示页面