7

私の状況

私は、自分のプロフィール写真と情報を持っている人々の大きなリストを持っています. すべてのアイテムには、CSS3 のスタイリング/アニメーションがいくつかあります。

私は使用しています：

<li ng-repeat="person in people">

people は、すべて同じページに表示する必要がある外部 JSON ファイルからの 150 を超えるオブジェクトを含む配列です。

ページのロード/レンダリングが遅くなります。これは、$http GET 関数が人々の JSON データを取得するためではなく (約 100 ミリ秒しかかかりません)、ページのレンダリングと、それぞれに適用されたすべての css3 スタイルのレンダリングのようです。アイテム（CSSをオフにすると、はるかに高速になります）。

私の主な問題

ページのレンダリングが遅くても問題ありませんが、本当に必要なのは、負荷の高いページがコンテンツをロードしたことを検出して、ロード インジケーターを開始および停止することです。次のようなディレクティブを作成してみました。

directive("peopleList", function () {
    return function (scope, element, attrs) {
        scope.$watch("people", function (value) {
            var val = value || null;
            console.log("Loading started");
            if (val){
                console.log("Loading finished");
            }
        });
    };
});

そして、このディレクティブを、私のリストを読み込んでいるラッパー div に配置します。しかし、JSON データを含むオブジェクトがいっぱいになると読み込みが停止するように見えますが、これには約 100 ミリ秒しかかかりませんが、ページの実際の視覚的レンダリングには 4 ～ 5 秒ほどかかります。

http://jsfiddle.net/zdam/dBR2r/のようなソリューションも試しましたが、同じ結果が得られました。

私が必要なもの

ページ (すべて同じ種類のリストがあります) をナビゲートするとき、ページが完全に読み込まれてユーザーに表示されるたびに、読み込みインジケーターを非表示にするタイミングがわかるようにする必要があります。

4

1 に答える 1

4

このディレクティブを追加してみてください -- 魔法はリンク関数にあります:

directives
  .directive('onFinishRender', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      if (scope.$last === true) {
          scope.$evalAsync(attr.onFinishRender);
      }
    }
  }
});

最初の項目としてローダーを追加します。

<li ng-show="!isDoneLoading">
  <div class="loading">Loading...</div>
</li>

次に、li に次のように追加します。

  <li ng-repeat="..." on-finish-render="isDoneLoading = true;"> ... </li>
于 2013-10-03T16:30:51.713 に答える