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%;
}
<img src="assets/page2_background.png" style="display: none">
.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