Preload基础使用方法详解


Posted in Javascript onFebruary 03, 2020

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 progressText = new createjs.Text("", "20px Arial", "#dd4814");
progressText.x = 125 - progressText.getMeasuredWidth() / 2;
progressText.y = 20;
stage.addChild(progressText);
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: "audiofile"
  }
 
  ];
  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.Sound);     
  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) {
  progressText.text = "已加载 " + (preload.progress*100|0) + " %";
  stage.update();
}
//全度资源加载完毕
function loadComplete(event) {
  console.log("已加载完毕全部资源");
}
setupManifest();
startPreload();

更多关于PreloadJS使用方法请点击下面的相关链接

Javascript 相关文章推荐
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 #Javascript
使用preload预加载页面资源时注意事项
Feb 03 #Javascript
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 #Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 #Javascript
微信小程序实现同时上传多张图片
Feb 03 #Javascript
解决小程序无法触发SESSION问题
Feb 03 #Javascript
You might like
MySQL相关说明
2007/01/15 PHP
php 删除数组元素
2009/01/16 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
解析php类的注册与自动加载
2013/07/05 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
jQuery参数列表集合
2011/04/06 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
python笔记(2)
2012/10/24 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
深入了解python列表(LIST)
2020/06/08 Python
python名片管理系统开发
2020/06/18 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
自荐信格式范文
2013/10/07 职场文书
应届生个人求职信模板
2013/11/26 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
2014年民政工作总结
2014/11/26 职场文书
秦兵马俑导游词
2015/02/02 职场文书
房地产项目合作意向书
2015/05/08 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
Java完整实现记事本代码
2022/06/16 Java/Android