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>