createjs-preloadjs初体验

1.引入preloadjs文件

<script src="https://code.createjs.com/1.0.0/preloadjs.min.js"></script>

2.有几种方法可以触发文件的加载，当我们单击button按钮时可以调用load函数加载

<button onclick="loadImage();" class="load-image">Load Image</button>

3.实例化一个loadQueue（加载队列）对象，因为我们想在加载完资源后再调用方法，所以，将事件监听器应用于队列实例

用于监听"fileload"，并在被触发时调用handleFileComplete函数，使用loadFile 方法来加载所选的文件

function loadImage() {
    var preload = new createjs.LoadQueue();
    preload.addEventListener("fileload", handleFileComplete);
    preload.loadFile("./builds/images/tree/png");
}

4.preloadjs 可以识别出文件类型，因此可以设置所附加的html元素，附加你的返回资源到document上

function handleFileComplete(event) {
    document.body.appendChild(event.result);
}

5.注意如果加载不出来了文件可能是文件名称或路径错误

6.截图如下：

（1）

（2）

7.源码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"> </script>
    <script src="https://code.createjs.com/1.0.0/preloadjs.min.js"> </script>
    <script>
        function loadImage() {
            var preload = new createjs.LoadQueue();
            preload.addEventListener("fileload", handleFileComplete);
            preload.loadFile("./builds/images/tree.jpg");
        }
        function handleFileComplete(event) {
            document.body.appendChild(event.result);
        }
    </script>
</head>
<body>
    <button onclick="loadImage();" class="load-image">Load Image</button>
</body>
</html>

createjs-preloadjs初体验

猜你喜欢