网页资源的预加载preloadjs

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

首先需要引入preloadjs文件
分享一个在线引用的网站:https://www.bootcdn.cn/
preloadjs在线引用地址:

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

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

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