使用PreloadJS加载图片资源的基础方法详解
一.使用createjs里的LoadQueue函数实现异步加载图片,监听加载进度
1.实例对象LoadQueue加载队列对象
varqueue=newcreatejs.LoadQueue(false);
2.需要监听常用到的三个方法
//监听进度事件 queue.on("progress",function(e){ }); //监听加载事件 queue.on("fileload",function(e){ }); //监听完成事件 queue.on("complete",function(e){ });
3.实现监听进度
html代码:
loading...
0%
js代码:
//监听进度事件 queue.on("progress",function(e){ varproNum=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); });
二:完整的代码
PreloadJs加载图片