Javascript 即使缓存了视图，也要立即使用Angular loader

我已经成功地用角度跟踪方法设置了一个完整的页面加载指示器。它使用ng hide/ng show，我使用CSS淡入淡出。这是我的密码：

HTML位：

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

角度位：

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

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

---

谢谢。

您基本上可以为动画指示器提供延迟。例如，将

加载

范围变量在延时后更改为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毫秒等待时间中删除加载时间。

谢谢您的回复。我用你的例子做了一个扑通。它似乎不能确保加载程序在初始视图之外显示：-我是否遗漏了什么？