Angular Web应用程序：未渲染启动屏幕，并且浏览器正忙于获取js文件

Question

我有一个棱角分明的应用程序，我想在浏览器获取所有资源（如js文件和图像）时立即向用户显示一个初始（加载文本）。

我在head部分仅包含css文件。 body的第一个元素是其中包含文本“ Loading的div 。

所有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文件的原因。 我正在使用角度1.2.28

Answer 1

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。

Answer 2

我有为什么未显示加载消息的原因。 事实证明，这毕竟是一个愚蠢的CSS问题。 :)

body's高度为0 px，因为没有内容，并且我的div定位为绝对。 （所以它没有增加身体的高度）

对我来说，让我的div定位fixed解决问题。

Angular Web应用程序：未渲染启动屏幕，并且浏览器正忙于获取js文件

问题描述

2 个解决方案

解决方案1
0 2015-08-13 19:01:58

解决方案2
0 已采纳 2015-08-13 19:12:51

Angular Web应用程序：未渲染启动屏幕，并且浏览器正忙于获取js文件

问题描述

2 个解决方案

解决方案1 0 2015-08-13 19:01:58

解决方案2 0 已采纳 2015-08-13 19:12:51

解决方案1
0 2015-08-13 19:01:58

解决方案2
0 已采纳 2015-08-13 19:12:51