PreloadJS网页资源预加载进度插件

 

一个 Javascript 插件，可以管理和协调资源的加载进度。

 

CDN地址：CDN- PreloadJS (baomitu.com)

官网：PreloadJS | A JavaScript library that lets you manage and co-ordinate the loading of assets. (createjs.com)

 

// 实例 LoadQueue 类，得到实例对象 queue。
let queue = new createjs.LoadQueue(true);

// 加载进度条，监听文件的加载在全部文件中的占比，并回调 handleProgress 函数。
queue.on('progress', handleProgress);

// 加载完成时，监听全部文件加载完成的那一刻，并回调 handleComplete 函数。
queue.on('complete', handleComplete);

// 需要监测的文件，文件可以是图片、js文件、json文件等都可以。
queue.loadManifest([

    // 这里使用的链接纯做测试，实际开发中添加项目中的全部文件链接即可。
    'images/bg.jpg',
    'bg.mp3',
]);

// 进度条回调函数
function handleProgress() {
    let num = `${Math.floor(queue.progress * 100)}%`; // queue.progress 是 'progress' 监听事件所返回的，它介于0到1之间，全部加载完成的时候结果为1，这里主要是处理这个数值按比例在1-100之间呈百分比显示。

}

// 加载完成回调函数
function handleComplete() {

}