Utilisez momentanément le chargeur angulaire même lorsque les vues sont mises en cache

Question

J'ai configuré avec succès un indicateur de chargement de page complète dans Angular suivant la méthode this. Il utilise ng-hide/ng-show, que j'utilise à l'aide de CSS. Voici mon code:

Le bit HTML:

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

Le bit 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; 
} 

Le bit angulaire:

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'); 
    }); 
}); 

Il semble agréable sur les charges de page fraîches, mais une fois que vous avez mis en cache des pages dans l'application et revenir à ces pages vous manquez sur les transitions de la page, comme le chargeur est inutile.

Comment puis-je m'assurer que le chargeur affichera au moins 500 ms si la page est mise en cache et ne montrerait pas le chargeur?

Existe-t-il une meilleure façon d'aborder ce problème?

Merci.

Answer 1

Vous pouvez fondamentalement donner un délai pour l'indicateur de l'animation. Par exemple changer la variable de portée loading à false après un délai peut être une approche directe;

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

De cette façon, l'action de la charge fera la même chose que ce faisait, et action « décharge » aura un délai 500ms.

---

MAIS, dans le cas de chargement d'une page uncached provoquera votre application pour retarder l'animation + 500ms à chaque fois, ce que cela signifie est, permet de dire que votre tirage au sort de la page prend 200ms et vous ajoutez 500ms à cela, provoquant un retard de 700 ms au total. Si cela vous pose un gros problème, je vous conseille de créer une minuterie lorsque l'animation de chargement de la page démarre, puis de supprimer le temps de chargement de votre temps d'attente de 500 ms lorsque l'action de déchargement aura lieu.