0

我有一个很大的 angularjs html 页面，angularjs 的渲染会花费很多时间。所以页面一开始几乎是空白的，过了一会儿，它突然显示了一切。

我想知道有没有什么办法可以让快的部分先显示，慢的部分在后显示，这样用户就不会对空白页感到惊讶。

我做了一个简单的演示：

<!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

我该怎么办？

4

1 回答 1

2

正如评论中提到的，浏览器在返回之前不会有机会呈现go()（JavaScript 是单线程的）。拆分go()函数并将慢速部分放入一个单独的函数中，该函数通过 $timeout 异步调用。为确保浏览器在调用 $timeout 回调之前有机会呈现，请给 $timeout 50 毫秒的延迟。

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

普朗克

于 2013-02-21T18:39:45.803 回答