切换页面时出现白色屏幕闪烁

Question

我们有一台在本地机器上运行的AngularJS应用程序（所有资产都在硬盘上），当我们切换页面时，我们看起来很难解决屏幕闪烁问题。

这里发生了什么，我们的问题是在＃3：主页

1）用户启动（http://localhost:9000/#/）

2）按钮，用户点击进入下一页（http://localhost:9000/#/page2）

3）**当新页面加载时，大约1/2秒，页面是白色的。 **

4）Page 2负载，屏幕上有很多图形。

我们已经尝试过：

1）设置背景图片，这是不够快。例如。

body { 
    background-image: url("/assets/page2_background.png"); 
    background-size: 100%; 
} 

2）获取前一页（本例中为主页）预先缓存下一页的背景。例如。 On http://localhost:9000/#/：

<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: '/' 
     }); 
    }) 

Answer 1

有多种方式来实现它，

1-使用解决途径，$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 - 使用ngCloak 用一个简单的标签后显示的页面加载图标和地方NG-cloack。 ngCloack将隐藏标签之上的所有内容，直到页面完全加载。

<div ng-app=""> 

<p ng-cloak> // Your normal HTML page</p> 

</div> 

看到这个例子here。

抄自here