gpt4 book ai didi

javascript - 如何使用 AngularJS 和 CreateJS 预加载图像

转载 作者:行者123 更新时间:2023-11-30 10:26:59 24 4
gpt4 key购买 nike

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

请相信下面的 AngularJS Controller 会正确初始化并显示第一个动画 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>

最佳答案

很可能对 handleComplete 的调用是在 Angular 上下文之外调用的,因此您需要执行 $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";
}
});

关于javascript - 如何使用 AngularJS 和 CreateJS 预加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19149776/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com