Мерцание Белого Экрана При Переключении Страниц

у нас есть приложение 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) Получение предыдущей страницы (в данном случае главной страницы) для предварительного кэширования фона следующей страницы. Например. On http://localhost:9000/#/:

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

ни один из них не достаточно быстро, мы еще можем увидеть белый фон. Мы знаем, что мы также можем установить цвет фона, но нет цвета, который заставит переход выглядеть хорошо (на следующей странице слишком много различной графики и отдельных цветов).

любые идеи о том, как избавиться от этого белого экрана между страницами?

EDIT:

вот моя конфигурация маршрутов.

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

1 ответов

есть несколько способов добиться этого,

1-Используйте Resolve в 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>

посмотреть этот пример здесь.

скопировать от здесь

6