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>

「速い名前」と「遅い名前」の 2 つの部分があることがわかります。速い名前ができるだけ早く表示され、次に遅い名前が表示されることを願っています。でも今のところ、最初は姿を見せず、しばらくすると一緒に姿を現します。

ライブ デモを作成しました: 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 に答える