Question

我正在尝试通过在应用启动之前加载所有媒体来初始化应用。但是我不太确定如何使用AngularJS框架使用CreateJS框架来处理预加载。以下不起作用。目标是在动画.gif loading_circle_black.gif显示时加载所有图像和声音，然后在使用slide_4.png（或其他）图像文件加载所有媒体时将其交换出来。

相信下面的AngularJS控制器正确初始化并显示第一个动画gif。问题是如何在html中对图像进行建模，以便可以交换图像。

的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>

Answer 1

很可能调用handleComplete是在angular context之外调用的，所以你需要做$ scope。$ apply（）。试试这个

function handleComplete() {
    $scope.$apply(function() {
       //createjs.Sound.play("sound_4");
       //var image = queue.getResult("/img/slide_4.png");
       $scope.imageFile = '/img/slide_4.png';
       $scope.status = "complete";
    }
});

如何使用AngularJS＆amp ;;预加载图像CreateJS

1 个答案: