Momentan Winkellader verwenden, selbst wenn Ansichten zwischengespeichert werden

Question

Ich habe erfolgreich eine ganzseitige Ladeanzeige in Angular nach this Methode eingerichtet. Es benutzt ng-hide/ng-show, die ich mit CSS ein- und ausgeblendet habe. Hier ist mein Code:

Die HTML-Bit:

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

Die CSS-Bit:

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

Das Eckige Bit:

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

Es sieht beim Laden neuer Seiten gut aus, aber sobald Sie Seiten in der App zwischengespeichert haben und zurück zu diesen Seiten navigieren, verpassen Sie die Überblendungen der Überblendungen, da der Loader nicht benötigt wird.

Wie kann ich sicherstellen, dass der Loader für mindestens 500ms angezeigt wird, wenn die Seite im Cache gespeichert ist und der Loader sonst nicht angezeigt wird?

Gibt es eine bessere Möglichkeit, dieses Problem anzugehen?

Danke.

Answer 1

Sie können den Indikator der Animation grundsätzlich verzögern. Zum Beispiel könnte die Änderung der Bereichsvariablen nach einer Zeitverzögerung auf einen falschen Ansatz erfolgen;

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

Auf diese Weise wird Last Aktion das gleiche tun, wie es tat, und „Entladen“ Aktion wird eine 500ms Verzögerung haben.

---

ABER, im Falle einer uncached Seite Laden Sie Ihre App verursacht Ihre Animation + 500ms jedes Mal zu verzögern, was dieses Mittel ist, sagen wir Ihre Seite Auslosung nimmt 200ms und Sie hinzufügen 500ms das verursacht eine 700ms Verzögerung insgesamt.

Wenn dies ein großes Problem für Sie ist, würde ich Ihnen raten, einen Timer zu erstellen, wenn die Animation zum Laden der Seite startet und dann die Ladezeit von Ihrer 500ms Wartezeit entfernen, wenn die Entladeaktion stattfindet.