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

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

  1. var queue = new createjs.LoadQueue(false);

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

  1. //监听进度事件
  2. queue.on("progress", function (e) {
  3.  
  4. });
  5. //监听加载事件
  6. queue.on("fileload", function (e) {
  7.  
  8. });
  9. //监听完成事件
  10. queue.on("complete", function (e) {
  11.  
  12. });

3.实现监听进度

  1. html代码:
  2. <h2>loading...<span id="progress">0%</span></h2>
  3. js代码:
  4. //监听进度事件
  5. queue.on("progress", function(e){
  6. 　　var proNum = Math.ceil(e.progress * 100);
  7. 　　$("#progress").html(  proNum + "%");
  8. });

4.添加加载资源

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

5.获取加载完的资源

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

二:完整的代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>PreloadJs加载图片</title>
  6. </head>
  7. <body>
  8. <div id="img"></div>
  9. <h2>loading...<span id="progress">0%</span></h2>
  10. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  11. <script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.min.js"></script>
  12. <script>
  13.     var queue = new createjs.LoadQueue(false);
  14.     //监听进度事件
  15.     queue.on("progress", function(e){
  16.         var proNum = Math.ceil(e.progress * 100);
  17.         $("#progress").html(  proNum + "%");
  18.     });
  19.     //监听完成事件
  20.     queue.on("complete", function(){
  21.         console.log("加载完成");
  22.         console.log(queue.getResult("img1"));
  23.     });
  24.     //加载单个图片
  25.     queue.loadFile("images/arrow.png");
  26.     //加载单个图片,带id
  27.     queue.loadFile({id: "img1", src:"images/slide3-bg.png"});
  28.     //加载多个文件,指定目录下
  29.     queue.loadManifest([
  30.         "slide1-bg.png",
  31.         "slide2-bg.png",
  32.         "slide3-bg.png"
  33.     ], true, "images/");
  34.     queue.on("fileload", function (e) {
  35.         document.body.appendChild(e.result);
  36.     });
  37. </script>
  38. </body>
  39. </html>

　　

使用PreloadJS加载图片资源的更多相关文章

  1. cocos2dx中加载图片资源的方法,和从内存中获取已经加载的图片资源的方法

    游戏中通常需要将常用的资源如:声音,图片,plist文件,提前加载进内存,以加快游戏的流畅度 1.预加载声音: SimpleAudioEngine::getInstance()->preload ...

  2. web项目加载图片资源

    在web项目中,用户会上传图片,这些图片应该存在服务器硬盘上,而不是存在数据库或者应用程序路径下,在数据库存入文件的路径. 这是一个比较重要的问题,也是开发过程中也解决的问题.当然,我可以跳过,但是成 ...

  3. 使用imageLoader加载图片资源

  4. Android学习笔记之BitmapFactory.Options实现图片资源的加载...

    PS:小项目总算是做完了...历经20多天...素材,设计,以及实现全由自己完成...心力憔悴啊...该写写博客记录一下学习到的东西了... 学习内容: 1.使用BitmapFactory.Optio ...

  5. cocos2d-x中CCTextureCache图片资源的异步加载

    如果没有预先加载图片,则可以通过addImageAsync()函数实现异步加载,该函数通过创建一个加载线程来加载图片,并且在主线程中通过调用回调函数来读取该图片资源纹理.其主要过程如下: 1.创建线程 ...

  6. cocos2d-x中CCTextureCache图片资源的异步加载<转>

    如果没有预先加载图片,则可以通过addImageAsync()函数实现异步加载,该函数通过创建一个加载线程来加载图片,并且在主线程中通过调用回调函数来读取该图片资源纹理.其主要过程如下: 1.创建线程 ...

  7. Cocos Creator学习六：加载/释放图片资源

    1.目的:学习加载图片资源.使用图片资源创建对象以及释放图片资源. 2.注意事项以及主要函数: ①注意事项:使用loadRes函数,资源必须放置在assets下的resources文件夹下(默认没有r ...

  8. js - 预加载+监听图片资源加载制作进度条

    这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图 本 ...

  9. html中的图像动态加载问题

    首先要说明下文档加载完成是什么概念 一个页面http请求访问时,浏览器会将它的html文件内容请求到本地解析,从窗口打开时开始解析这个document,页面初始的html结构和里面的文字等内容加载完成 ...

随机推荐

  1. angular用$sce服务来过滤HTML标签

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...

  2. C语言编程题002

    给出两个整数,L和R,其中L<=A<=B<=R,然后求出A^B值最大的数.其中1<=L<=R<=1000. 比如说L = 1;R = 3; L 0001 R 001 ...

  3. Python+Selenium练习篇之6-利用class name定位元素

    有时候,我们在用firepath(不会的请点这里)查看元素的XPath信息,发现没有可以用来定位的id信息,这个时候我们就需要考虑用其他的可用的来定位元素.本文介绍如何通过元素节点中class nam ...

  4. poj3009 Curling 2.0 （DFS按直线算步骤）

    Curling 2.0 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14563   Accepted: 6080 Desc ...

  5. OOP & DOM

    OOP & DOM let Dom = Dom || {}; Dom = { checkValType(val) { let typeString = Object.prototype.toS ...

  6. 【bzoj2721】[Violet 5]樱花 数论

    题目描述 输入 输出 样例输入 2 样例输出 3 题解 数论 设1/x+1/y=1/m,那么xm+ym=xy,所以xy-xm-ym+m^2=m^2,所以(x-m)(y-m)=m^2. 所以解的数量就是 ...

  7. 洛谷P3245 [HNOI2016]大数 【莫队】

    题目 题解 除了\(5\)和\(2\) 后缀数字对\(P\)取模意义下,两个位置相减如果为\(0\),那么对应子串即为\(P\)的倍数 只用对区间种相同数个数\(x\)贡献\({x \choose 2 ...

  8. 连接XenServer中VM的Console。

    在XenServer6.2中的虚拟机,连接Guest VM串口的方法: 1. 首先在Guest VM中设置串口: 我的是CentOS6: 修改/etc/grub/grub.conf: 2. 修改完后, ...

  9. pdo防sql注入

    http://blog.csdn.net/qq635785620/article/details/11284591

  10. BZOJ 3876 支线剧情

    支线剧情 [故事背景] 宅男JYY非常喜欢玩RPG游戏,比如仙剑,轩辕剑等等.不过JYY喜欢的并不是战斗场景,而是类似电视剧一般的充满恩怨情仇的剧情.这些游戏往往都有很多的支线剧情,现在JYY想花费最 ...