这篇文章主要介绍如何使用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加载图片资源”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
