♏️ AnimationLib-PreloadJS基本用法

version: 0.6.2
PreloadJS的基本用法,更多详细内容可参考官网API
传送门:http://createjs.com/docs/preloadjs/modules/PreloadJS.html

简介

  • PreloadJS提供了一个一致的方式预先加载在HTML应用的内容,以及预加载可以使用HTML标签作为XHR完成。
  • 默认, PreloadJS 将尝试使用XHR加载内容,因为它提供了进度和完成事件方面的更好支持, 然而由于跨域的问题,它可能仍然是优选使用基于标签的负载代替。 请注意,某些内容要求XHR工作(纯文本,网页音频)和一些需要的标签(HTML音频)。请注意,在可能的情况下它是自动处理的。

基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//创建实例
var queue = new createjs.LoadQueue();
// 绑定事件
queue.on("progress", handelProgress, this);
queue.on("complete", handleComplete, this);
//加载资源
queue.loadFile({id:"sound", src:"http://path/to/sound.mp3"});
//资源数组
queue.loadManifest([
{id: "myImage", src:"path/to/myImage.jpg"}
]);
//callback函数
function handelProgress(e){
//Todo: 加载过程可以显示加载进度......
$('.loadingText').text(Math.ceil(e.loaded * 100) + '%');
}
function handleComplete(e){
//Todo: 预加载结束后......
}

事件的种类

  • complete: 当队列完成加载所有文件时
  • error: 当队列与任何文件遇到错误时
  • progress: 对于整个队列进展已经改变
  • fileload: 单个文件已完成加载
  • fileprogress: 单个文件进度的变化

PreloadJS的主类:LoadQueue

  • LoadQueue类是预加​​载内容的主要API。 LoadQueue是负载管理器,可以预载单个文件或文件队列。
1
LoadQueue([preferXHR=true], [basePath=''], [crossOrigin='']);

preferXHR: 这个表明是用 XHR 还是 HTML 标签来加载。默认是 true ,也就是 XHR 方式。
basePath: 一个基本的路径。加载资源时会把 basePath 加到 url 前面。
crossOrigin: 建议不要使用,用 LoadItem.crossOrigin 来替代。

补充

1.设置并发数

1
2
queue.maintainScriptOrder = true;
queue.setMaxConnections(100);

2.某个资源加载完后的获取

1
2
var img = queue.getResult('myImage');
document.body.appendChild(img);