createjs之preloadjs概览

Example

 var queue = new createjs.LoadQueue();
 queue.installPlugin(createjs.Sound);
 queue.on("complete", handleComplete, this);
 queue.loadFile({id:"sound", src:"http://path/to/sound.mp3"});
 queue.loadManifest([
     {id: "myImage", src:"path/to/myImage.jpg"}
 ]);
 function handleComplete() {
     createjs.Sound.play("sound");
     var image = queue.getResult("myImage");
     document.body.appendChild(image);
 }

从上面这个代码能大概的看出来，预加载大概分为3步

• 实例化一个预加载对象

• 明确加载资源的路径以及命名

  • 单个资源加载loadFile
  • 多个资源加载loadManifest

• 如果有需要可以绑定加载各个过程的事件监听程序

  • complete 队列完成加载所有文件时触发
  • progress 当整个队列发生改变时触发
  • fileload 单个文件完成加载时触发
  • error 当队列遇到任何错误时触发
  • fileprogress 当队列遇到任何文件的错误时触发。

PreloadJS - LoadQueue Class

preloadjs最主要的类就是LoadQueue，接下来介绍一下LoadQueue常见的方法和使用方式，LoadQueue是加载管理器，可以用来预加载单个文件或者是文件队列

Creating a Queue 创建一个下载队列

var queue = new createjs.LoadQueue(true);

LoadQueue的构造函数参数( [preferXHR=true] [basePath=""] [crossOrigin=""] )
Parameters:

• [preferXHR=true] Boolean optional
  true表示优先使用xhr加载，选择false则优先通过html标签进行加载，默认值是true
• [basePath=""] String optional
  对于需要加载的资源，在加载时，在资源路径前面加上统一的参数，但是如果资源src是"http://www.xx.com"这种完整的url，或者是使用相对路径中的../将不会增加参数
• [crossOrigin=""] String | Boolean optional
  一个可选的参数，用于支持启用CORS的服务器加载图像。我目前没有发现这个参数有什么用，因为我们项目需要的图片都是我们自己的，并没有调用其他服务器的图像，所以不存在跨域问题。

Listening for Event 添加下载相关的事件

5个事件监听程序就是上面提到的，使用方法如下：

queue.on('fileload', handleFileLoad, this);
queue.on('complete', handleFileLoad, this);

Adding files and manifests 添加下载文件

添加单个文件通过loadFile, 或者一次性添加多个文件使用数组或者清单列表通过调用loadManifest，文件将会被添加到活动队列，所以何时何地都可以使用这些方法，因为加载资源共用同一个队列，新建下载任务无非都加入了队尾！

queue.loadFile('filePath/file.jpg');        // 添加单个文件使用loadFile方法，参数是相对路径
queue.loadFile({
    id: 'image',
    src: 'filePath/file.jpg'                // 这种添加的方法主要是想给这副图片绑定id，方便加载后使用
})
queue.loadManifest([                    // 这种添加方法，添加的就是资源数组，这个数组里，无非是带id不带id的申明区别
    "filePath/file.jpg",
    {id: 'image', src: 'filePath/file.jpg'}
])

// 使用json作为外部资源，这个json的格式可能就是我们的资源数组的格式
queue.loadManifest('path/to/manifest.json');
queue.loadManifest({
    src: 'manifest.json', 
    type: 'manifest'                 //这里要特殊说明一下文件类型
])

File Types 文件类型

清单项的文件类型由文件扩展名自动确定。 PreloadJS 中的模式匹配应该处理大多数标准文件和 URL 格式，并使用常见的文件扩展名。 如果您具有非标准文件扩展名，或者使用代理脚本提供文件，则可以使用任何清单项传递 type 属性。
这个也就是上面使用json作为外部资源时，为什么要声明type的原因！

queue.LoadFile({
    src: 'filePath/myFile.mp3x',
    type: createjs.Types.SOUND
])

queue.LoadFile({
    src: 'https://www.xiaomi.com?file=image.jpg',
    type: createjs.Types.IMAGE
})

这两种“不合常理”的写法分别解释一下，第一种采用了mp3x文件拓展名，不是常规的拓展名，所以createjs不能自动识别，需要手动规定其解析类型；第二种，采用的是url，但是createjs不会尝试从查询字符串，也就是?file=image.jgp，中进行查询，所以也是需要调用createjs.Types.IMAGE进行解析.
支持的类型定义：

• BINARY: Raw binary data via XHR
• CSS: CSS files
• IMAGE: Common image formats
• JAVASCRIPT: JavaScript files
• JSON: JSON data
• JSONP: JSON files cross-domain
• MANIFEST: A list of files to load in JSON format, see AbstractLoader/loadManifest
• SOUND: Audio file formats
• SPRITESHEET: JSON SpriteSheet definitions. This will also load sub-images, and provide a SpriteSheet - instance.
• SVG: SVG files
• TEXT: Text files - XHR only
• VIDEO: Video objects
• XML: XML data

Handling Results 处理结果

前面那几个步骤目的在于初始化下载队列，添加下载文件，包括添加下载各个过程的事件。那么我们文件下载好了之后呢？文件下载的目的肯定是使用啊，那怎么办呢？让我们由浅入深往下看！、
文件下载完毕后，fileload事件会触发。加载的文件通常是一个格式化的对象，而且可以立即使用，看一下常见的文件格式加载后转换为可以供我们调用的文件格式：

• Binary: The binary loaded result
• CSS: A <link /> tag
• Image: An <img /> tag
• JavaScript: A <script /> tag
• JSON/JSONP: A formatted JavaScript Object
• Manifest: A JavaScript object.
• Sound: An <audio /> tag
• SpriteSheet: A SpriteSheet instance, containing loaded images.
• SVG: An <object /> tag
• Text: Raw text
• Video: A Video DOM node
• XML: An XML DOM node

来看一个官网的例子：

function handleFileLoad(event) {
     var queue = new createjs.LoadQueue(true);
     queue.on("fileload", handleFileLoad, this);

     queue.loadFile("filePath/file.jpg");

     var item = event.item; // 这个item就是 一个img对象，注意啊，这里我们绑定的是fileload事件，因为fileload事件定义就是一个文件加载就触发
     var type = item.type;

     // Add any images to the page body.
     if (type == createjs.Types.IMAGE) {
         document.body.appendChild(event.result);
     }
 }

注意，与资源下载有关的那些事件的事件对象的属性不尽相同，fileload拥有全部的事件对象属性，差异可以看一下官网：https://createjs.com/docs/pre...
这里fileload的事件对象属性如下：

getResult 使用加载后的文件

每当文件加载完毕，我们可以通过使用getResult(id)；来访问我们的文件，如果没有提供id值，那么可以输入src或者文件的路径，依然可以访问。如果要查找内容，建议始终传递ID。不要给自己找麻烦。

 var image = queue.getResult("image");   // image已经是img对象了
 document.body.appendChild(image);

想要访问文件的二进制数据怎么办？一种是使用fileload事件的事件对象的rawResult属性，或者是直接在getResult方法第二个参数加一个true。 这仅适用于已为浏览器解析的内容，特别是：JavaScript，CSS，XML，SVG 和 JSON 对象，或任何使用 XHR 加载的内容

 var image = queue.getResult("image", true); // load the binary image data loaded with XHR.