Angular JS:检测页面内容何时完全呈现并且可见

Question

我的情况

我有一个很大的人员列表,都有自己的个人资料图片和信息.所有项目都有一些CSS3样式/动画.

我正在使用:

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

人们是一个包含来自外部JSON文件的超过150个对象的数组,这些对象都必须显示在同一页面上.

页面加载/渲染速度很慢,而不是因为$ http GET函数可以获取人员的JSON数据(只需要大约100毫秒),但是页面的渲染和所有css3样式的渲染都应用于每个item(如果我把我的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/这样的解决方案,但我得到的结果相同.

我需要的

当我浏览我的页面(它们都有相同类型的列表)时,我需要一些东西告诉我,只要页面已经完全加载并且对用户可见,这样我就知道何时隐藏我的加载指示器.

Answer 1

尝试添加此指令——神奇之处在于链接函数：

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>