PxLoader-h5资源预加载方案

  PxLoader是一个JavaScript库，可以帮助您创建一个资源加载界面，并提前下载好您后面界面需要加载的资源。它可以通过提供进度和已完成的事件监视下载状态，您可以由次实时更新您的进度条信息。

开始使用

PxLoader并没有npm版本，需要以文件引入的形式引用。

// 开始使用
// 1. 下载脚本并将文件放置在站点的JavaScript目录中。
// PxLoader.js（主库文件）
// PxLoaderImage.js（如果要下载图像，则为图像文件下载器）
// PxLoaderSound.js（如果要下载声音，则为声音文件下载器）
// PxLoaderVideo.js（如果要下载视频，则为视频文件下载器）
// 2.添加核心库
<script type="text/javascript" src="js/PxLoader.js"></script>
// 3.添加所需资源类型的文件

<!- images --> 
<script type="text/javascript" src="js/PxLoaderImage.js"></script> 
 
<!- sounds --> 
<script type="text/javascript" src="js/PxLoaderSound.js"></script> 
// PxLoaderSound需要依赖SoundManager2来加载和播放音频文件，此次不探讨

以下为PxLoader基本api

const loader = new window.PxLoader({
  // option 详情见官网
});
const PxLoaderImage = new window. PxLoaderImage();
loader.addImage('localhost:3000/images/headerbg.jpg') // 核心库会帮我们下载好图片并缓存
loader.addProgressListener((obj) => { 
    // 更新的资源
    resource: {} // the resource parameter provided to loader.add() 
    // 已更新的资源的状态
    loaded: true, 
    error: false, 
    timeout: false, 
    // 资源统计信息
    completedCount: 42, // 已完成的数量
    totalCount: 100 // 一共要下载的文件的数量
}); // 每下载完一个文件触发的回调
let img = PxLoaderImage.addImage('localhost:3000/images/headerbg.jpg') // PxLoaderImage插件会返回一个img标签
console.log(img) // <img src="localhost:3000/images/headerbg.jpg" alt="" />

以下演示需要在首页下载大量文件，并获取到实时的下载进度信息的需求解决方式

// 假如我们需要在 page1文件夹下下载 page1_1.png, page1_2.png, page1_3.png，page2文件夹下下载 page2_1.png, page2_2.png, page2_3.png，
// 一共要下载6个文件
// 首先声明数组
const preloadingList = [
  'page1/page1_1.png',  'page1/page1_2.png', 'page1/page1_3.png',
   'page2/page2_1.png', 'page2/page2_2.png', 'page2/page2_3.png'
];

const baseurl = 'localhost:3000';
const loader = new window.PxLoader();
preloadingList.forEach((item) => {
  if (item) {
    loader.addImage(baseurl + item);
  }
})

loader.addProgressListener(function (e) {
  console.log(e.completedCount)
  // 在这里可以写关于进度条的业务
})

loader.addCompletionListener(function(e) { 
    console.log('Ready to go!'); 
    // 监听下载完成的回调
}); 

// 开始冲！
loader.start();