使用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 相关文章推荐
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
使用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中取得image按钮传递的name值
2006/10/09 PHP
php获取地址栏信息的代码
2008/10/08 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
js实现简单点赞操作
2020/03/17 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
python实现simhash算法实例
2014/04/25 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
python3 下载网络图片代码实例
2019/08/27 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
房屋买卖协议书
2014/04/10 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
婚前财产协议书范本
2014/10/19 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS