使用PreloadJS加载图片资源的基础方法详解


Posted in Javascript onFebruary 03, 2020

一. 使用createjs里的LoadQueue函数实现异步加载图片,监听加载进度

1.实例对象LoadQueue加载队列对象

var queue = new createjs.LoadQueue(false);

2.需要监听常用到的三个方法

//监听进度事件
queue.on("progress", function (e) {
   
});
//监听加载事件
queue.on("fileload", function (e) {
 
});
//监听完成事件
queue.on("complete", function (e) {
 
});

3.实现监听进度

html代码:

<h2>loading...<span id="progress">0%</span></h2>

js代码:

//监听进度事件
queue.on("progress", function(e){
var proNum = Math.ceil(e.progress * 100);

$("#progress").html( proNum + "%");
});

4.添加加载资源

//加载单个图片
queue.loadFile("images/arrow.png");
//加载单个图片,带id
queue.loadFile({id: "img1", src:"images/slide3-bg.png"});
//加载多个文件,指定目录下
queue.loadManifest([
  "slide1-bg.png",
  "slide2-bg.png",
  "slide3-bg.png"
], true, "images/");

5.获取加载完的资源

queue.on("fileload", function (e) {
  document.body.appendChild(e.result);
});

二:完整的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PreloadJs加载图片</title>
</head>
<body>
<div id="img"></div>
<h2>loading...<span id="progress">0%</span></h2>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.min.js"></script>
<script>
  var queue = new createjs.LoadQueue(false);
  //监听进度事件
  queue.on("progress", function(e){
    var proNum = Math.ceil(e.progress * 100);
    $("#progress").html( proNum + "%");
  });
  //监听完成事件
  queue.on("complete", function(){
    console.log("加载完成");
    console.log(queue.getResult("img1"));
  });
  //加载单个图片
  queue.loadFile("images/arrow.png");
  //加载单个图片,带id
  queue.loadFile({id: "img1", src:"images/slide3-bg.png"});
  //加载多个文件,指定目录下
  queue.loadManifest([
    "slide1-bg.png",
    "slide2-bg.png",
    "slide3-bg.png"
  ], true, "images/");
  queue.on("fileload", function (e) {
    document.body.appendChild(e.result);
  });
</script>
</body>
</html>

更多关于PreloadJS加载页面资源的相关文章请点击下面的相关链接

Javascript 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
Node调用Java的示例代码
Sep 20 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 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
vue组件创建的三种方式小结
Feb 03 #Javascript
You might like
Adodb的十个实例(清晰版)
2006/12/31 PHP
PHP脚本中include文件出错解决方法
2008/11/20 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
javascript实现数独解法
2015/03/14 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python写的ARP攻击代码实例
2014/06/04 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
pandas数据处理进阶详解
2019/10/11 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python map及filter函数使用方法解析
2020/08/06 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
2014年教师培训的自我评价
2014/01/03 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
Django实现翻页的示例代码
2021/05/24 Python
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python