PreloadJS
PreloadJS 提供了一种预加载内容的统一方式,以便在HTML应用程序中使用。预加载可以使用 'HTML标签' 以及 'XHR' 来完成。
默认情况下,PreloadJS 会尝试使用 'XHR' 加载内容,因为它提供了对进度和完成事件的更好支持,但是由于跨域问题,使用基于 'HTML标签' 的加载可能更好。
注意:有些内容需要' XHR' 才能工作(纯文本、Web Audio),有些需要 'HTML标签'(HTML Audio)。尽可能自动处理这些。
PreloadJS 目前支持所有的现代浏览器,我们已经尽最大努力包括对大多数旧版浏览器的支持。如果发现任何特定操作系统/浏览器组合的问题,请访问 'http://community.createjs.com/' 报告。
开始
要开始使用,请查看 'LoadQueue' 类,其中包含一个对于如何加载文件和处理结果的快速概要。
示例:
var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound);
queue.on('complete', handleComplete, this);
queue.loadFile({id: 'sound', src: '声音.mp3'});
queue.loadManifest([
{id: 'image1', src: '图片.jpg'}
]);
function handleComplete(){
createjs.Sound.play('sound');
var image = queue.getResult('image1');
document.body.appendChild(image);
}
关于插件的重要说明:
插件必须在项目添加到队列之前安装,否则加载未实际启动,添加到队列中的条目,不会被处理。一旦项目添加到 'LoadQueue' 时,则会调用插件功能。
浏览器支持
PreloadJS 在 '所有浏览器' 中都得到 '部分支持',并在 '所有现代浏览器' 中得到 '完全支持'。已知的例外有:
1.对于任意内容,使用 'XHR' 方式加载,在许多较旧的浏览器中都不起作用(请参见http://caniuse.com/xhr2)。在许多情况下,我们可以使用 '标签加载' 方式(图像,音频,CSS,脚本和SVG)。Text 和 WebAudio 只有使用 'XHR加载' 才有效。
2.某些格式对IE 6,7和8中的 complete事件支持很差!(SVG, 以 '标签加载' 脚本, XML/JSON)
3.Opera对 'XHR' 方式加载 SVG 的支持很差
4.Android和Safari中,对于CSS加载,使用 '标签加载' 方式无效!(目前正在想办法解决)
5.本地加载不允许使用 'XHR' 方式,而加载某些文件格式只能使用 'XHR' 加载。在测试本地内容时,请使用一个本地服务器,或者启用 '标签加载',这是大多数格式所支持的。有关更多信息,请参阅 'setPreferXHR'。
跨域加载(博客已经写了好多)
只要服务器支持CORS,大部分内容类型都可以跨域加载。PreloadJS还通过 'LoadQueue' 构造函数中的 'crossOrigin' 参数,对 '支持CORS的服务器' 的图像提供内部支持。如果设置 'crossOrigin' 为一个字符串值(例如:Anonymous),PreloadJS 生成的图像的 'crossOrigin' 属性将设置为该值。请注意,在 '不支持CORS服务器提供的图像' 上设置 'crossOrigin' 值会导致其他错误。有关CORS的更多信息,请访问https://en.wikipedia.org/wiki/Cross-origin_resource_sharing。
大致看了下提供的类文件,有分类特性:
// PreloadJS库其他
PreloadJS
SamplePlugin
LoadQueue
LoadItem
// 工具集
DataUtils
DomUtils
RequestUtils
URLUtils
// 3个基类
AbstractLoader
AbstractMediaLoader
AbstractRequest
// 加载的请求方式
TagRequest
MediaTagRequest
XHRRequest
// 不同类型文件的加载
BinaryLoader
CSSLoader
FontLoader
ImageLoader
JavaScriptLoader
JSONLoader
JSONPLoader
ManifestLoader
SoundLoader
SpriteSheetLoader
SVGLoader
TextLoader
VideoLoader
XMLLoader
// 额外的事件对象
ProgressEvent
ErrorEvent
// CreateJS 套件里公共部分
Event
EventDispatcher
Utility Methods
1.PreloadJS
PreloadJS 是一个静态类,可获取类库的具体信息,例如:库的版本、构建日期等。
2.SamplePlugin
PreloadJS插件提供了一种给 PreloadJS 功能注入的方式,用于加载不被支持的文件类型,或者以PreloadJS不支持的方式。
注意:
该类主要是文档为目的,介绍插件,并不是一个真正的插件。
插件是基于 '文件扩展名' 或 '支持的预加载类型' 进行注册的,在 'LoadQueue' 类中定义为常量。可用的负载类型是
插件通过 'getPreloadHandlers' 方法来定义它处理的类型或扩展,当插件首次注册时会调用该方法。
注册 'PreloadJS' 的插件,只需通过调用 'installPlugin' 方法,在文件开始加载之前,简单地安装它到 'LoadQueue' 队列中
var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.SamplePlugin);
queue.loadFile('test.jpg');
'getPreloadHandlers' 方法还可以返回一个 'callback' 属性,该回调函数在每个文件加载之前调用。查看 'preloadHandler' 以获取有关回调函数如何工作的更多信息。例如:SoundJS 插件允许 'PreloadJS' 管理使用Flash Player的下载。
3.LoadQueue
'LoadQueue' 类是预加载内容的主要API。'LoadQueue' 是一个加载管理器,可以预加载单个文件或文件队列。
创建一个队列
使用 'LoadQueue',需要创建一个 'LoadQueue' 实例。如果想强制使用 '标签加载' 方式,设置 'preferXHR' 参数为false
var queue = new createjs.LoadQueue(true);
监听事件
添加任何想要的监听器到队列中。从 'PreloadJS' 0.3.0版本后,'EventDispatcher' 允许为事件添加尽可能的监听器。可以订阅以下事件:
complete - 当队列加载完所有文件,触发
error - 当队列中加载任意一个文件出错,触发
progress - 整个队列进度改变时,触发
fileload - 单个文件加载完成,触发
fileprogress - 单个文件进度改变时,触发。注意:只有使用XHR(或通过插件可能实现进度跟踪)加载的文件,才会触进度事件。得到的进度值是:除了0或100%。
queue.on('fileload', handleFileLoad, this);
queue.on('complete', handleComplete, this);
添加文件和程序清单(manifests)
使用 'loadFile' 添加要加载的文件,或一次性添加多个文件 '给 loadFile 方法传递一个列表' 或 '使用 loadManifest' 传递一个 'manifest定义'。文件被追加到活动队列的末尾,所以只要你喜欢,你可以随时随地使用这些方法。
queue.loadFile('file.jpg');
queue.loadFile({id: 'image', src: 'file.jpg'});
queue.loadManifest(['file.jpg', {id: 'image', src: 'file.jpg'}]);
// 使用外部的manifest文件
queue.loadManifest('manifest.json');
queue.loadManifest({src: 'manifest.json', type: 'manifest'});
如果传递 'false' 作为 'loadNow' 参数,队列将不会启动文件的加载,但是如果已经启动,则不会停止。调用 'load' 方法来启动暂停的队列。请注意:当使用 'loadNow' 参数为 'true',来将新文件添加到队列时,将自动恢复暂停的队列。
queue.load();
文件类型
manifest条目的文件类型,是由文件扩展名自动决定的。PreloadJS中的模式匹配,应该处理大部分的标准文件和url格式,并且支持常用的文件扩展名。如果有一个 '不标准' 的文件扩展名,或使用一个代理脚本来提供文件,可以给 manifest条目 传递一个 'type' 属性,来指明文件类型。
queue.loadFile({src: '音乐.mp3x', type: createjs.Types.SOUND});
// 注意:PreloadJS 不会从查询字符串,读取文件扩展名
queue.loadFile({src: 'http://server.com/proxy?file=图片.jpg', type: createjs.Types.IMAGE});
支持的文件类型,定义在 'AbstractLoader' 类中,包含:
Types/BINARY
Types/CSS
Types/IMAGE
Types/JAVASCRIPT
Types/JSON
Types/JSONP
Types/MANIFEST
Types/SOUND
Types/SPRITESHEET
Types/SVG
Types/TEXT
Types/VIDEO
Types/XML
注意:Loader类型以前是在 'LoadQueue' 上定义的,但已经被移动到了 'Types类
结果处理
当一个文件下载完成,触发一个 'fileload' 事件。在上面的例子中,有一个用于 'fileload' 的事件监听器片段。加载的文件通常是一个格式化的对象,该对象可以立即使用,包括:
Binary - 二进制加载结果
CSS - <link>标签
Image - <img>标签
Javascript - <script>标签
JSON/JSONP - 一个格式化的JavaScript对象
Manifest - 一个Javascript对象
Sound - <audio>标签
SpriteSheet - 一个 'SpriteSheet' 实例,包含加载的图片
SVG - <object>标签
Text - 纯文本
Video - Video DOM节点
XML - XML DOM节点
function handleFileLoad(event){
var item = event.item; // 对传入 'LoadQueue' 的条目的引用
var type = item.type;
// 将任何图片,添加到body中
if(type == createjs.Types.IMAGE){
document.body.appendChild(event.result); // 如果是图片, event.result 就是 <img> 标签
}
}
在文件已经加载后(通常在队列完成后),可以给 'getResult' 方法,传递一个 'id' 参数,来查找任何结果。如果未提供id,可以使用 'src' 或 '文件路径' 来替代。包括定义在manifest中的 'path',但是不包含 'LoadQueue' 上定义的基本路径。如果想要查找内容,建议始终传递一个 'id' 参数
var image = queue.getResult('image');
document.body.appendChild(image);
加载的原生内容,可以使用 'fileload' 事件的 'rawResult' 属性来访问,或通过给 'getResult' 方法,传递第二个参数为 'true' 来查找。这仅适用于浏览器已解析的内容,具体为:Javascript, CSS, XML, SVG, JSON对象,或任何通过 XHR 加载的内容。
var image = queue.getResult('image', true); // 加载用 XHR 加载的二进制图像数据
插件
LoadQueue 有一个简单的插件架构来帮助处理和预载内容。例如,要预加载音频,确保安装 'SoundJS Sound' 类,这将有助于加载 'HTML audio','Flash audio' 和 'WebAudio' 文件。加载任何音频文件之前应该先安装插件。
queue.installPlugin(createjs.Sound);
已知的浏览器问题
1.没有音频支持的浏览器无法加载音频文件。
2.如果安装了QuickTime,则Mac OS X上的Safari只能播放HTML音频
3.HTML音频标签只会下载,直到canPlayThrough事件被触发。 Chrome以外的浏览器将继续在后台下载。
4.使用标签加载脚本时,它们会自动添加到文档中。
5.使用浏览器工具可能无法正确检查通过XHR加载的脚本。
6.IE6和IE7(以及其他某些浏览器)可能无法加载XML,文本或JSON,因为它们需要XHR才能工作。
7.通过标签加载的内容不会显示进度,并且在取消后将继续在后台下载,但不会派发任何事件。
4.LoadItem
所有的加载器,接收一个条目,该条目包含了定义在 '对应加载器类' 中属性。如果传递了一个原始对象,它将不会受到影响,但是它至少包含一个 'Src:xxx' 的属性。也可以传递 '字符串路径' 或 'HTML标签',但是将会使用 'AbstractLoader' 的 'Create' 方法,自动转换为一个 'LoadItem'
5.DataUtils
一些用于格式化不同数据类型的使用工具
6.DomUtils
用于创建供 'PreloadJS' 使用的各种元素的便捷方法
7.RequestUtils
有助于解析加载条目,和确定文件类型等等的实用工具
8.URLUtils
有助于解析加载条目,和确定文件类型等等的实用工具
9.Abstract
基础加载器,定义了所有的通用方法、属性和事件。所有的加载器扩展这个类,包括 'LoadQueue' 类。
10.AbstractMediaLoader
AbstractMediaLoader 是一个基类,用于处理一些加载器的共享方法和属性,这类加载器用于处理HTML媒体元素(例如:Video 和 Audio)
11.AbstractRequest
一个用于实际数据请求的基类,如:XHRRequest, TagRequest, MediaRequest。PreloadJS加载器通常会使用数据加载器来获取数据。
12.TagRequest
一个用于加载 'HTML标签'(例如:图片和脚本) 的 'AbstractRequest' 类。
13.MediaTagRequest
一个用于加载video和audio这2个HTML标签 的 'TagRequest' 类。
14.XHRRequest
使用 'XHR' 请求加载条目的预加载器,通常使用 'XMLHttpRequest'。但是,如果可能的话,XDomainRequests将用于跨域请求,而且必要时,老版本的IE将会重新使用 ActiveX 对象。XHR 请求将内容作为文本或二进制数据加载,并提供进度和一致的完成事件,并可在加载期间取消。注意:IE 6及以下版本不支持 XHR,不推荐跨域加载。
15.BinaryLoader
二进制文件加载器。对加载 web audio,或需要 'ArrayBuffer' 的内容非常有用。
// 各种不同类型的文件加载器
16.CSSLoader
17.FontLoader
18.ImageLoader
19.JavaScriptLoader
20.JSONLoader
21.JSONPLoader
22.ManifestLoader
23.SoundLoader
24.SpriteSheetLoader
25.SVGLoader
26.TextLoader
27.VideoLoader
28.XMLLoader
29.ProgressEvent
进度改变时,触发的 'CreateJS' 事件
30.ErrorEvent
通用错误事件,描述发生的错误,以及任何细节
// 下面几个,在 CreateJS 套件里是公共的
31.Event
32.EventDispatcher
33.Utility Methods