切换页面时白屏闪烁

Question

我们有一个 AngularJS 应用程序在本地机器上运行（所有资产都在硬盘上），并且我们在切换页面时似乎很难解决屏幕闪烁问题。

这就是发生的事情，我们的问题在 #3：

1) 用户在主页开始 (http://localhost:9000/#/)

2) 用户点击按钮进入下一页 (http://localhost:9000/#/page2)

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

4) 页面 2 加载，屏幕上有很多图形。

我们已经尝试过了：

1) 设置背景图片，这还不够快。例如。

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

2) 获取上一页（在本例中为主页）以预缓存下一页的背景。例如。在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- 在路由中使用 Resolve，$routeProviderresolve 属性允许延迟路由更改，直到加载数据。

.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-clock。 ngCloack 将隐藏上面标记之后的所有内容，直到页面完全加载。

<div ng-app="">

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

</div>

请参阅此示例here。

复制自here