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 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
express 项目分层实践详解
Dec 10 Javascript
简介JavaScript错误处理机制
Aug 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
解决yum对python依赖版本问题
2019/07/05 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
师范生自荐信范文
2013/10/06 职场文书
艺术爱好者的自我评价分享
2013/10/08 职场文书
公积金转移接收函
2014/01/11 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
大学生党员自我批评
2014/02/14 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
社区端午节活动总结
2015/02/11 职场文书
优秀员工自荐书
2015/03/06 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
五一晚会主持词
2015/07/01 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
php解析非标准json、非规范json的方式实例
2022/05/10 PHP