切换页面时出现白屏闪烁

We have an AngularJS application running locally on a machine (all assets are on the hard drive) and we have a seemingly difficult to solve screen flicker when we switch pages.

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

Here's what happens, our issue is on #3:

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

1) User start on main page (http://localhost:9000/#/)

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

2) User clicks on button to go to next page (http://localhost:9000/#/page2)

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

3) ** While the new page is loading, for about 1/2 a second the page is white. **

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

4) Page 2 loads, with lots of graphics on screen.

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

We have already tried:

我们已经尝试过:

1) Setting a background image, this is not fast enough. Eg.

1)设置背景图像,这还不够快。例如。

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

2) Getting the previous page (in this case the main page) to pre-cache the next page's background. Eg. On http://localhost:9000/#/:

2)获取上一页(在本例中为主页面)以预先缓存下一页的背景。例如。在http:// localhost:9000 /#/:

<img src="assets/page2_background.png" style="display: none">

None of these are fast enough, we can still see the white background. We are aware that we can also set a background color, but there is no color that will make the transition look good (the next page has too many different graphics and individual colors).

这些都不够快,我们仍然可以看到白色背景。我们知道我们也可以设置背景颜色,但没有颜色可以使转换看起来很好(下一页有太多不同的图形和单独的颜色)。

Any ideas on how to get rid of this white screen between pages?

关于如何摆脱页面间白屏的任何想法?

EDIT:

Here is my routes configuration.

这是我的路线配置。

.config(function ($routeProvider) {
    $routeProvider
      .when('/page2', {
        templateUrl: 'views/page2.html',
        controller: 'Page2Ctrl',
        controllerAs: 'page2'
      })
      .otherwise({
        redirectTo: '/'
      });
  })

1 个解决方案

#1

There are multiple ways to achieve it,

有多种方法可以实现它,

1- Use Resolve in route, $routeProvider resolve property allows delaying of route change until data is loaded.

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 - Use ngCloak Use a simple tag to display page loading icon and place ng-cloack after it. ngCloack will hide everything after tag above till page is fully loaded.

2 - 使用ngCloak使用简单标签显示页面加载图标并在其后放置ng-cloack。 ngCloack将在上面的标记之后隐藏所有内容,直到页面完全加载。

<div ng-app="">

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

</div>

See this example here.

在此处查看此示例。

copied from here

从这里复制

1 个解决方案

#1

更多相关文章

随机推荐