[英]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. 我们有一台在机器上本地运行的AngularJS应用程序(所有资产都在硬盘上),当我们切换页面时,我们看起来很难解决屏幕闪烁问题。
Here's what happens, our issue is on #3: 这是发生了什么,我们的问题在#3:
1) User start on main page ( http://localhost:9000/#/ ) 1)用户在主页面上启动( http:// localhost:9000 /#/ )
2) User clicks on button to go to next page ( http://localhost:9000/#/page2 ) 2)用户点击按钮转到下一页( http:// localhost:9000 /#/ page2 )
3) ** While the new page is loading, for about 1/2 a second the page is white. 3)**加载新页面时,大约1/2秒钟页面为白色。 **
**
4) Page 2 loads, with lots of graphics on screen. 4)加载,屏幕上有大量图形。
We have already tried: 我们已经尝试过:
1) Setting a background image, this is not fast enough. 1)设置背景图像,这还不够快。 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. 2)获取上一页(在本例中为主页面)以预先缓存下一页的背景。 Eg.
例如。 On http://localhost:9000/#/ :
在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. 1-使用路径中的Resolve, $ routeProvider resolve属性允许延迟路由更改,直到加载数据。
.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. 2 - 使用ngCloak使用简单标签显示页面加载图标并在其后放置ng-cloack。 ngCloack will hide everything after tag above till page is fully loaded.
ngCloack将在上面的标记之后隐藏所有内容,直到页面完全加载。
<div ng-app="">
<p ng-cloak> // Your normal HTML page</p>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.