切换页面时出现白屏闪烁

Question

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

这是发生了什么,我们的问题在#3:

1)用户在主页面上启动(http:// localhost:9000 /#/)

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

3)**加载新页面时,大约1/2秒钟页面为白色.**

4)加载,屏幕上有大量图形.

我们已经尝试过:

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,$ 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>

在此处查看此示例.

从这里复制