Мгновенно используйте загрузчик Angular, даже если представления кэшируются

Я успешно настроил индикатор загрузки всей страницы в Angular, следуя этому методу. Он использует ng-hide/ng-show, которые я постепенно добавляю и исчезаю с помощью CSS. Вот мой код:

Немного HTML:

<div ng-show="loading" class="loader">Loading</div>

Небольшая часть CSS:

.loader {
    transition: 0.25s linear all;
    opacity: 0;
    visibility: hidden;
}
.ng-hide-add {
    opacity: 0;
    visibility: hidden;
}
.ng-hide-remove {
    opacity: 1;
    visibility: visible;
}

Угловой бит:

myApp.controller('appController', function($scope, $route, $rootScope) {
    $scope.$on('LOAD',function(){$scope.loading=true});
    $scope.$on('UNLOAD',function(){$scope.loading=false});
});

myApp.controller('pageController', function($scope) {
    $scope.$emit('LOAD')
    angular.element(document).ready(function () {
        $scope.$emit('UNLOAD');
    });
});

Это выглядит красиво при загрузке новых страниц, но как только вы кэшируете страницы в приложении и возвращаетесь к этим страницам, вы пропускаете исчезающие переходы страниц, поскольку загрузчик не нужен.

Как я могу гарантировать, что загрузчик будет отображаться не менее 500 мс, если страница кэширована, и в противном случае загрузчик не будет отображаться?

Есть ли лучший способ подойти к этой проблеме?

Спасибо.


javascript angularjs loader ng-show ng-hide
person longforshort    schedule 31.01.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете в принципе дать задержку для индикатора анимации. Например, изменение переменной области видимости loading на false после временной задержки может быть прямым подходом;

myApp.controller('appController', function($scope, $route, $rootScope) {
    $scope.$on('LOAD',function(){$scope.loading=true});
    $scope.$on('UNLOAD',function(){
      setTimeout(function(){
        $scope.loading = false;
      }, 500);
    });
});

Таким образом, действие загрузки будет делать то же самое, что и раньше, а действие «выгрузить» будет иметь задержку 500 мс.

НО, в случае загрузки некэшированной страницы ваше приложение каждый раз будет задерживать анимацию +500 мс, что это значит, скажем, отрисовка вашей страницы занимает 200 мс, а вы добавляете к этому 500 мс, вызывая общую задержку 700 мс.

Если это большая проблема для вас, я бы посоветовал вам создать таймер, когда начинается анимация загрузки страницы, а затем удалить время загрузки из вашего времени ожидания 500 мс, когда будет происходить действие выгрузки.

person Burak Tokak    schedule 31.01.2017
comment
Спасибо за ответ. Я сделал плункер, используя ваш пример. По-видимому, это не гарантирует, что загрузчик будет отображаться за пределами первоначального вида: /a> — Я что-то упустил? - person longforshort; 01.02.2017