Question

我的情况

我有很多人都有自己的个人资料照片和信息。所有项目都有一些CSS3样式/动画。

我正在使用：

<li ng-repeat="person in 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/这样的解决方案，但我得到的结果相同。

我需要什么

当我浏览我的页面（所有页面都有相同类型）时，我需要一些东西告诉我，只要页面完全加载并且对用户可见，这样我就知道何时到隐藏我的装载指示器。

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 ng-repeat="..." on-finish-render="isDoneLoading = true;"> ... </li>

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

1 个答案: