I am faced with the challenge of initializing an app where all media must load before the app can start. I am using AngularJS framework alongside CreateJS for preloading, but I am unsure of the correct approach. The code below is not functioning as intended. My goal is to display an animated .gif loading_circle_black.gif while all images and sounds are loading, then switch it out with the image file slide_4.png once everything has loaded.
Assume that the AngularJS controller is properly initialized and displays the initial animated gif. The question now is: How should I structure the HTML so that the image can be swapped successfully?
JavaScript
ControllerLibrary.prototype.MainStageController = function($scope) {
$scope.imageFile = "loading_circle_black.gif";
$scope.status = "loading";
var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound);
queue.addEventListener("complete", handleComplete);
queue.loadFile({id: "sound_4", src: "/sounds/slide_4.mp3"});
queue.loadManifest([{id: "slide_4", src: "/img/slide_4.png"}]);
function handleComplete() {
//createjs.Sound.play("sound_4");
//var image = queue.getResult("/img/slide_4.png");
$scope.imageFile = '/img/slide_4.png';
$scope.status = "complete";
}
HTML
<body style="background-color: black;color: whitesmoke;">
<div id="main" ng-controller="MainStageController" >
<center>
<!--<img id="loadingCircle" src="/img/loading_circle_black.gif"/>-->
<img ng-src="/img/{{imageFile}}"/>
<h2>{{status}}</h2>
</center>
</div>
</body>