createjs-preloadjs初体验

最新推荐文章于 2025-06-28 10:55:11 发布

原创最新推荐文章于 2025-06-28 10:55:11 发布 · 851 阅读

0 ·

CC 4.0 BY-SA版权

Createjs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用createjs的preloadjs库进行文件预加载。从引入preloadjs文件开始，详细讲解了如何在用户触发事件时启动加载，创建加载队列，并监听文件加载完成的事件。此外，还提到了preloadjs能自动识别文件类型并将其附加到HTML文档中，同时强调了文件路径和名称正确性的重要性。最后，提供了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入preloadjs文件

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

2.有几种方法可以触发文件的加载， eg：当我们单击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>