Как убрать угловую часть сначала, а затем сделать медленную часть?

У меня есть большая угловая страница html, рендеринг угловых займет много времени. Таким образом, страница сначала почти пустая, и через некоторое время она показывает все внезапно.Как убрать угловую часть сначала, а затем сделать медленную часть?

Интересно, есть ли способ сделать первую часть первой, а медленная часть будет показана позже, поэтому пользователь не будет удивлен пустой страницей.

Я сделал простой демо:

<!DOCTYPE html> 

<html ng-app> 
<head> 
    <meta charset="UTF-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script> 
</head> 
<body ng-controller="Ctrl"> 
<button ng-click="go()">Go</button> 
<hr/> 
<div>Fast</div> 
<button ng-repeat="name in fastNames">{{name}}</button> 
<hr/> 
<div>Slow</div> 
<button ng-repeat="name in slowNames">{{name}}</button> 
</body> 
</html> 
<script type="text/javascript"> 
    function Ctrl($scope) { 
     $scope.fastNames = []; 
     $scope.slowNames = []; 

     $scope.go = function() { 
      $scope.fast(); 
      $scope.slow(); 
     } 

     $scope.fast = function() { 
      $scope.fastNames = ["F1", "F2"]; 
     }; 

     $scope.slow = function() { 
      for (var i = 0; i < 50000000; i++) { 
      new Date(); 
      } 
      $scope.slowNames = ["S1", "S2"];   
     } 


    } 
</script>

Вы можете видеть, что есть две части - «быстрые имена» и «медленные» имена. Я надеюсь, что быстрые имена могут отображаться как можно скорее, а затем медленные имена. Но пока они не будут показаны сначала, и через некоторое время они показывают вместе.

Я создал демо: http://plnkr.co/edit/9lW2TbLBkCB1hhgBVGmo?p=preview

Что я должен делать?

источник

2013-02-21 Freewind

До гоу() возвращает, вид не будет обновляться. Разделите функцию go() на две части: gofast() и goslow(). Вызовите goslow() в тайм-аут или что-то, чтобы позволить gofast() вернуться до запуска goslow(). –

Кажется, работа: , но это «способ угловатого»? Мне нужно добавить '$ scope. $ Digest()' вручную. – Freewind

Я только что нашел, что он работает на хроме, но не на firefox. – Freewind

Как уже упоминалось в комментариях, браузер не получит рендеринга до тех пор, пока не вернется go() (JavaScript однопоточный). Разделите функцию go() и поместите медленную часть в отдельную функцию, которая называется асинхронно, через $ timeout. Чтобы браузер имел возможность отобразить перед вызовом обратного вызова $ timeout, дайте $ timeout задержку в размере 50 мс.

$scope.go = function() { 
    $scope.fast(); 
    $timeout(function() { 
     $scope.slow(); 
    },50); // give browser time to render 
};

Plunker

источник

2013-02-21 18:39:45

Как определить максимальную задержку ожидания? Является ли '50ms' всегда работать для основных браузеров? – Freewind

@ Не волнуйтесь, вы не можете точно знать, когда браузер закончил рендеринг. В этом сообщении http://stackoverflow.com/questions/11125078/is-there-a-post-render-callback-for-angular-js-directive, Nic периодически проверял что-то в DOM, чтобы определить, завершена ли рендеринг. –

Как убрать угловую часть сначала, а затем сделать медленную часть?

ответ

Смежные вопросы