I am trying to preload images with CreateJS/PreloadJS. These images will replace an image with attributes like id and class. When I use JQuery to replace the image, all of these attributes are lost.
What is the proper way to preload images and then later display the images on my page?
<html>
<img id="main" class="fit center"/>
</html>
function changeImage(event){
$('#main').replaceWith(queue.getResult("main"));
}
function handleFileComplete(event){
console.log(event.result);
}
function loadImage() { // jshint ignore:line
var preload = new createjs.LoadQueue(); // jshint ignore:line
preload.addEventListener("fileload", handleFileComplete);
preload.loadFile("img/main.png");
}
$(document).ready(function() {
queue = new createjs.LoadQueue();
queue.loadManifest([
{id: "main", src:"img/main.png"}
]);
queue.on("complete", handleFileComplete, this);
});
Apply the attributes to the new image before using JQuery to replace the element.