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 回答