Angular web app: Splash screen is not rendered and browser is busy fetching the js files
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.
I have included only css files in the head section. The first element in the body is the div that has the text Loading in it.
All the script tags are at the end of the body (just before the closing tag).
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).
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. I am using angular 1.2.28
2 answers
solution1
0 2015-08-13 19:01:58
ng-hide should be listening to a property on $scope , not calling a function.
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 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.
solution2
0 ACCPTED 2015-08-13 19:12:51
I got the reason for why my loading message was not being displayed. It turned out to be a silly CSS issue after all. :)
The body's height was 0 px as there was no content and my div was positioned absolute. (so it did not add to the body's height)
For me, making my div to position fixed solved the case.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.