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 相关文章推荐
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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
PHP版本常用的排序算法汇总
2015/12/20 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
python使用pymysql实现操作mysql
2016/09/13 Python
Python实现进程同步和通信的方法
2018/01/02 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
python开发前景如何
2020/06/11 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
获奖的大学生创业计划书
2014/01/05 职场文书
学校门卫管理制度
2014/01/30 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
教学质量月活动总结
2015/05/11 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang