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 in route，$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

复制

切换页面时出现白屏闪烁

1 个答案: