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 MethodsCreateJS-PreloadJS文档翻译
猜你喜欢
转载自blog.csdn.net/beyond__devil/article/details/79000390
今日推荐
周排行