createjs之preloadjs概览

Parkeeers

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.
阅读 5.4k

createjs由浅入深
由于业务的需求,开始做H5动画项目,第一次接触createjs,附上我学习的笔记以及心得,一起学习一起交流

求知若渴,保持谦逊

770 声望
32 粉丝
0 条评论

求知若渴,保持谦逊

770 声望
32 粉丝
文章目录
宣传栏