White Screen Flicker When Switching Pages
We have an AngularJS application running locally on a machine (all assets are on the hard drive) and we have a seemingly difficult to solve screen flicker when we switch pages.
Here's what happens, our issue is on #3:
1) User start on main page (http://localhost:9000/#/)
2) User clicks on button to go to next page (http://localhost:9000/#/page2)
3) ** While the new page is loading, for about 1/2 a second the page is white. **
4) Page 2 loads, with lots of graphics on screen.
We have already tried:
1) Setting a background image, this is not fast enough. Eg.
body {
background-image: url("/assets/page2_background.png");
background-size: 100%;
}
2) Getting the previous page (in this case the main page) to pre-cache the next page's background. Eg. On http://localhost:9000/#/:
<img src="assets/page2_background.png" style="display: none">
None of these are fast enough, we can still see the white background. We are aware that we can also set a background color, but there is no color that will make the transition look good (the next page has too many different graphics and individual colors).
Any ideas on how to get rid of this white screen between pages?
EDIT:
Here is my routes configuration.
.config(function ($routeProvider) {
$routeProvider
.when('/page2', {
templateUrl: 'views/page2.html',
controller: 'Page2Ctrl',
controllerAs: 'page2'
})
.otherwise({
redirectTo: '/'
});
})
There are multiple ways to achieve it,
1- Use Resolve in route, $routeProvider resolve property allows delaying of route change until data is loaded.
.config(function ($routeProvider) {
$routeProvider
.when('/page2', {
templateUrl: 'views/page2.html',
controller: 'Page2Ctrl',
controllerAs: 'page2',
resolve: {
myData: function($q, $http){
var deferred = $q.defer();
// USE it to load data and delay page transition.
return deferred.promise;
}
}
})
.otherwise({
redirectTo: '/'
});
})
2 - Use ngCloak Use a simple tag to display page loading icon and place ng-cloack after it. ngCloack will hide everything after tag above till page is fully loaded.
<div ng-app="">
<p ng-cloak> // Your normal HTML page</p>
</div>
See this example here.
copied from here