这篇文章主要介绍如何使用Preloadjs加载图片资源,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一. 使用createjs里的LoadQueue函数实现异步加载图片,监听加载进度
这篇文章主要介绍如何使用Preloadjs加载图片资源,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
var queue = new createjs.LoadQueue(false);
//监听进度事件
queue.on("progress", function (e) {
});
//监听加载事件
queue.on("fileload", function (e) {
});
//监听完成事件
queue.on("complete", function (e) {
});
html代码:
<h3>loading...<span id="progress">0%</span></h3>
js代码:
//监听进度事件
queue.on("progress", function(e){
var proNum = Math.ceil(e.progress * 100);
$("#progress").html( proNum + "%");
});
//加载单个图片
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);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PreloadJs加载图片</title>
</head>
<body>
<div id="img"></div>
<h3>loading...<span id="progress">0%</span></h3>
<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加载图片资源”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网html频道!
--结束END--
本文标题: 如何使用PreloadJS加载图片资源
本文链接: https://www.lsjlt.com/news/65365.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0