使用PreloadJS加載圖片資源

時間 2019-12-08

標籤使用 preloadjs 加載圖片資源简体版

原文原文鏈接

一. 使用createjs裏的LoadQueue函數實現異步加載圖片,監聽加載進度javascript

1.實例對象LoadQueue加載隊列對象css

var queue = new createjs.LoadQueue(false);

2.須要監聽經常使用到的三個方法html

//監聽進度事件
queue.on("progress", function (e) {
    
});
//監聽加載事件
queue.on("fileload", function (e) {

});
//監聽完成事件
queue.on("complete", function (e) {

});

3.實現監聽進度java

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.添加加載資源jquery

//加載單個圖片
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.獲取加載完的資源app

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",
        "slide2-bg.png",
        "slide3-bg.png"
    ], true, "images/");
    queue.on("fileload", function (e) {
        document.body.appendChild(e.result);
    });
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。