Include the PreloadJS libraries in your project by linking to the CreateJS CDN.
<script src="https://code.createjs.com/preloadjs-0.6.1.min.js"></script>
There are several ways to trigger the loading of assets. We’re going to call the load function when we click this button.
<button onclick="loadImage();" class="load-image">Load Image</button>
Instantiate a new LoadQueue class that we can use during this tutorial. Since we want to call a function when our asset load completes, apply an event listener to the queue instance for that listens for ‘fileload’ and calls the handleFileComplete function when it is triggered. Use the loadFile() method to load your chosen file by passing in its source.
function loadImage() {
var preload = new createjs.LoadQueue();
preload.addEventListener("fileload", handleFileComplete);
preload.loadFile("assets/preloadjs-bg-center.png");
}
PreloadJS recognizes file types and sets the HTML elements it appends accordingly. Read more here: LoadQueue Docs Append your returned asset to the document.
function handleFileComplete(event) {
document.body.appendChild(event.result);
}