javascript - 切换页面时白屏闪烁

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- 在 route 使用 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 - 使用 ngCloak 使用一个简单的标签来显示页面加载图标并在其后放置 ng-cloack。 ngCloack 将隐藏上面标记后的所有内容，直到页面完全加载。

<div ng-app="">

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

</div>

查看此示例 here .

复制自here