使用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 相关文章推荐
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
jQuery阻止同类型事件小结
2013/04/19 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
django中的HTML控件及参数传递方法
2018/03/20 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
python中四舍五入的正确打开方式
2021/01/18 Python
python反扒机制的5种解决方法
2021/02/06 Python
党校培训自我鉴定
2014/02/01 职场文书
狼和鹿教学反思
2014/02/05 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
导师就业推荐信范文
2014/05/22 职场文书
酒店开业策划方案
2014/06/02 职场文书
协会周年庆活动方案
2014/08/26 职场文书
研究生导师推荐信
2015/03/25 职场文书
诚信考试主题班会
2015/08/17 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang