网页资源的预加载preloadjs

PreloadJS是一个用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源
例如：图片 文件 音频 数据 等等

首先需要引入preloadjs文件
分享一个在线引用的网站:https://www.bootcdn.cn/
preloadjs在线引用地址:<script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.js"></script>

下面说说具体的用法(基础):

首先我们需要创建一个实例对象

var preload = new createjs.LoadQueue(true);

创建完成后，配置需要预加载的文件

var mainfest = [
  { src: "/img.jpg" },      //图片
  { src: "/music.mp3" },   //音频
  { src: "/hahaVedio.mp4" },  //视频
  { src: "./jquery.js" },   //js文件
  { src: "./user.json" }  //json文件
];

注：LoadQueue支持相关文件类型如下：

BINARY: XHR调用的二进制文件
CSS: CSS文件
IMAGE: 一般图片文件格式
JAVASCRIPT: JavaScript文件
JSON: JSON数据
JSONP: 跨域JSON文件
MANIFEST: JSON格式的文件列表
SOUND: 音频文件
SVG: SVG文件
TEXT: 文本文件 - 仅支持XHR XML: XML数据
接下来配置加载过程中的函数

//加载队列变化时的回调
preload.addEventListener("progress", handleFileProgress);
//加载全部完成时的回调
preload.addEventListener("complete", loadComplete);

function handleFileProgress(){
	console.log('加载完毕其一')
}

function loadComplete(){
	console.log('全体加载完成')
}

其他勾子：

complete: 当队列完成加载所有文件时。
error: 当队列与任何文件遇到错误时。
progress: 对于整个队列进展已经改变。
fileload: 单个文件已完成加载。
fileprogress: 单个文件进度变化。注意,只有文件装载XHR(或可能通过插件)将 file 事件进展除了0或100%
最后开始预加载

preload.loadManifest(manifest);

本文参考preloadjs的api文档
文档链接：http://www.createjs.cc/preloadjs/docs/modules/PreloadJS.html
————————————————
版权声明：本文为CSDN博主「干嘛又给我转钱」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42115928/article/details/105436299