富贵资源网 Design By www.hznty.com
一. 使用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="/UploadFiles/2021-04-02/jquery.min.js">更多关于PreloadJS加载页面资源的相关文章请点击下面的相关链接
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...