PreloadJS 介绍
Preloadjs是 一个 用来管理和协调相关资源加载的类库,它可以方便的帮助你预先加载相关资源,例如
图片
文件
音频
数据
其他
它使用了XHR2来提供实时的加载进度信息,如果 不支持 则使用 标签 式的简化进度来实现进度展示。
支持 多队列,多连接,暂停队列等等 功能
在Preloadjs中,LoadQueue是主要用来 预加载 内容 的API。LoadQueue是 一个 加载管理器,可以预先加载 一个 文件 或者 一个 文件 队列。
var queue = new createjs.LoadQueue(true);
以上 代码 中,传递 一个 false参数则强制使用 标签 式的加载。LoadQueue包含了以下几个可以 订阅 的事件:
complete: 当队列完成全部加载后触发
error: 当队列遇到 错误 时触发
progress: 整个队列变化时展示的进度
fileload: 一个 单独 文件 加载完毕
fileprogress: 一个 单独 文件 变化的进度,请注意只有 文件 使用XHR加载才会触发,其它只会 显示 0或者100%
可以通过 调用 loadfile(" 文件 路径")加载 一个 文件 或者 调用 loadMnifest()来加载多个 文件 。
LoadQueue 支持 相关 文件 类型如下:
BINARY: XHR 调用 的二进制 文件
css: css 文件
IMAGE: 一般 图片 文件 格式
JavaScript: JavaScript 文件
jsON: jsON数据
jsONP: 跨域jsON 文件
MANIFEST: jsON格式的 文件 列表
SOUND: 音频 文件
SVG: SVG 文件
TEXT: 文本 文件 - 仅 支持 XHR
XML: XML数据
代码 示例: var canvas = document.getElementById("myCanvas");var stage = new createjs.Stage(canvas);var manifest;var preload;var progre sst ext = new createjs.Text("","20px Arial","#dd4814");progre sst ext.x = 125 - progre sst ext.getMeasuredWidth() / 2;progre sst ext.y = 20;stage.addChild(progre sst ext);stage.update();//定义相关JSON格式 文件 列表function setupManifest() {manifest = [{src: "http://cdn.gbtags.com/EaselJS/0.7.1/easeljs.min.js",id: "easeljs"},{src: "http://www.gbtags.com/gb/networks/uploadimgthumb/4d8f3f13-89c0-455c-95f3-ba5120c2f123.jpg",id: " logo "},{src: "http://www.gbtags.com/tutorials/html5-tutorial/html5-demos/assets/song.ogg",id: "au dio file"}];for(var i=1;i<=10;i++)manifest.push({src:"http://www.gbtags.com/gb/laitu/200x200"})}//开始 预加载 function startPreload() {preload = new createjs.LoadQueue(true);//注意加载音频 文件 需要 调用 如下 代码 行preload.installPlugin(createjs .so und);preload.on("fileload",handleFileLoad);preload.on("progress",handleFileProgress);preload.on("complete",loadComplete);preload.on("error",loadError);preload.loadManifest(manifest);}//处理单个 文件 加载function handleFileLoad(event) {console.log(" 文件 类型: " + event.item.type);if(event.item.id == " logo "){console.log(" logo 图片 已成功加载");}}//处理加载 错误 :大家可以 修改 成 错误 的 文件 地址,可在控制台看到此 方法 调用 function loadError(evt) {console.log("加载出错!",evt.text);}//已加载完毕进度function handleFileProgress(event) {progre sst ext.text = "已加载 " + (preload.progress*100|0) + " %";stage.update();}//全度资源加载完毕function loadComplete(event) {console.log("已加载完毕全部资源");}setupManifest();startPreload(); 链接 : http://www.fly63.com/nav/1531网站地址 : http://createjs.com/
GitHub: https://github.com/CreateJS/PreloadJS
网站描述: 一个 用来管理和协调相关资源加载的类库
PreloadJS官方网站
官方网站: http://createjs.com/
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。