Question

我已按照this方法在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;
}

Angular位：

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毫秒，否则不会显示加载程序？

有没有更好的方法来解决这个问题？

感谢。

Answer 1

你基本上可以延迟动画的指标。例如，在延迟时间之后将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);
    });
});

这样，加载操作将执行与执行操作相同的操作，并且＆＃34;卸载＆＃34;行动将有500毫秒的延迟。

但，在加载未缓存页面的情况下会导致您的应用每次延迟动画+ 500毫秒，这意味着，让我们说你的页面绘制需要200毫秒而你需要增加500毫秒对此，导致总共延迟700ms。

如果这对您来说是一个大问题，我会建议您在页面加载动画开始时创建一个计时器，然后从卸载操作发生时的500毫秒等待时间中删除加载时间。

即使缓存视图，也要暂时使用Angular加载程序

1 个答案: