使用PreloadJS載入圖片資源的基礎方法詳解
阿新 • • 發佈：2020-02-05
一. 使用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="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","slide3-bg.png"
],"images/");
queue.on("fileload",function (e) {
document.body.appendChild(e.result);
});
</script>
</body>
</html>
更多關於PreloadJS載入頁面資源的相關文章請點選下面的相關連結