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

Question

I have angular application in which I want to show the user a splash (loading text) immediately while the browser fetches all the resources like js files and images. 我有一个棱角分明的应用程序，我想在浏览器获取所有资源（如js文件和图像）时立即向用户显示一个初始（加载文本）。

I have included only css files in the head section. 我在head部分仅包含css文件。 The first element in the body is the div that has the text Loading in it. body的第一个元素是其中包含文本“ Loading的div 。

All the script tags are at the end of the body (just before the closing tag). 所有script标签都在body的末尾（恰好在结束标签之前）。

The issue is, theoretically the browser should render the loading text as the first thing, but what happens is that i just see a white screen until all my js files are fetched (even if i have only one after concatenation, the browser still fetches them first and then my loader comes after a long white screen). 问题是，从理论上讲，浏览器应该首先显示正在加载的文本，但是发生的是，我只看到白屏，直到提取了所有js文件（即使我在连接后只有一个，浏览器仍会提取它们）首先，然后是我的装载机，在出现白色长屏之后）。

Here is what I am doing: 这是我在做什么：

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

Unable to figure out why the Loading msg is not shown and browser starts fetching the js files. 无法弄清为什么未显示“正在加载味精”并且浏览器开始获取js文件的原因。 I am using angular 1.2.28 我正在使用角度1.2.28

Answer 1

ng-hide should be listening to a property on $scope , not calling a function. ng-hide应该监听$scope上的属性，而不是调用函数。

You need your code to look something like: 您需要代码看起来像这样：

$scope.loaded = false

myLoadingFunctions() {
  // ... do loading stuff
  $scope.loaded = true;
}

And then your loading div is: 然后您的加载div是：

<div ng-hide="loaded">
  <h2>Loading...</h2>
</div>

If you look at the console, it's likely that you're either interrupting your JS or calling a non-existent method and causing an error, or the loaded() call is simply evaluating to null and therefore hiding the div. 如果您查看控制台，则可能是您正在中断JS或调用不存在的方法并导致错误，或者loaded()调用只是评估为null并因此隐藏了div。

Answer 2

I got the reason for why my loading message was not being displayed. 我有为什么未显示加载消息的原因。 It turned out to be a silly CSS issue after all. 事实证明，这毕竟是一个愚蠢的CSS问题。 :) :)

The body's height was 0 px as there was no content and my div was positioned absolute. body's高度为0 px，因为没有内容，并且我的div定位为绝对。 (so it did not add to the body's height) （所以它没有增加身体的高度）

For me, making my div to position fixed solved the case. 对我来说，让我的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