我有一个 Angular 应用程序，我想在浏览器获取所有资源(如 js 文件和图像)时立即向用户显示启动画面(加载文本)。
我在 head 部分只包含了 css 文件。 body 中的第一个元素是 div，其中包含文本 Loading。
所有的 script 标签都在 body 的末尾(就在结束标签之前)。
问题是，理论上浏览器应该首先呈现加载文本，但发生的是我只看到一个白屏，直到我的所有 js 文件都被获取(即使我在连接后只有一个，浏览器仍然先获取它们，然后我的加载程序在一个长长的白屏之后出现。
这是我正在做的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="link to first css file" />
<link rel="stylesheet" href="link to second css file" />
</head>
<body ng-app="my-app" class="{{$state.current.name}}">
<div ng-hide="loaded()">
<h2>Loading...</h2>
</div>
<div id="content-wrapper" ng-cloak>
<!-- all other angular app content is wrapped into this section -->
</div>
<script src="first script"></script>
<script src="second script"></script>
<script src="third script"></script>
</body>
</html>
无法弄清楚为什么没有显示正在加载的消息并且浏览器开始获取 js 文件。我正在使用 Angular 1.2.28
最佳答案
ng-hide 应该监听 $scope 上的属性，而不是调用函数。
你需要你的代码看起来像这样:
$scope.loaded = false
myLoadingFunctions() {
// ... do loading stuff
$scope.loaded = true;
}
然后你的加载div是:
<div ng-hide="loaded">
<h2>Loading...</h2>
</div>
如果您查看控制台，很可能是您正在中断 JS 或调用不存在的方法并导致错误，或者 loaded() 调用只是评估为 null，因此隐藏了 div。
关于javascript - Angular 网络应用程序 : Splash screen is not rendered and browser is busy fetching the js files，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31996340/