Angular JS：检测页面内容已完全渲染并可见
我的情况
我有一大堆人都有自己的个人资料图片和信息。 所有项目都有一些CSS3样式/动画。
我在用着：
<li ng-repeat="person in people">
人们是来自外部JSON文件的超过150个对象的数组，它们都必须显示在同一页面上。
页面加载/渲染缓慢，并不是因为获取带有人的JSON数据的$ http GET函数（仅需要大约100ms），而是页面的渲染和所有应用于每个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数据对象被填充时，加载似乎停止，这只需要100ms左右，但是页面的实际可视化渲染更像4-5s。
我也试过像http://jsfiddle.net/zdam/dBR2r/这样的解决方案，但我在那里得到了相同的结果。
我需要的
当我浏览我的页面时（它们都具有相同类型的列表）时，我需要一些告诉我什么时候页面已完全加载并且对用户可见，以便知道何时隐藏我的加载指示符。
尝试添加此指令 - 魔术在链接功能中：
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: Detect when page content has rendered fully and is visible