Question

我有一个视图，我加载了包含大量图像（通常在100-200之间），所以这可能需要大约5秒才能完全加载/渲染，所以我想在此期间添加一个加载指示器时间。

我的问题是，我似乎无法找到一种可靠的方法来知道何时呈现视图并隐藏加载指示器。以前，我使用这段[jQuery]代码来实现这个目标：

$(window).load(function() { $('.loading-notice').fadeOut(300, function () { $('.library-thumbnails').fadeIn(1000); }); });

哪个效果很好 - 但是在通过Angular.js加载视图时这是不可用的。

我的Angular.js模板和控制器设置很好，可以使用jQuery以相同的方式进行淡入淡出，但我无法检测到图像何时完成加载都是 - 我似乎只能检测何时从将在模型中使用的服务器返回JSON。

修改我应该提到，我也尝试使用$ viewContentLoaded，如下所示，但是在图像完成加载之前调用它。

$scope.$on('$viewContentLoaded', function () { console.log('$viewContentLoaded'); });

Answer 1

资源：ngLoading

我的一位好朋友在Hack Reactor（Mason Hargrove）创建了一个名为ngLoading的Angular指令，您可以将其用于此目的。

以下是它的作用：

ngLoading将侦听从您的应用程序发出的任何http请求并显示动画，当您的应用程序收到http响应时，它将删除动画。

步骤分步

安装ngLoading：
```
bower install ng-loading --save
```
将ngLoading作为依赖项注入主模块：
```
angular.module('myApp', ['ngLoading']);
```

（可选）如果在$http请求完成后图像没有快速渲染到模板，则可以继续加载屏幕（hacky且可能不必要）：

.controller('MyController', function(Interceptor, $timeout) {
  //trigger the loading screen to start
  Interceptor.start();

  // Give the images time, 4 seconds, to render
  $timeout(Interceptor.end, 4000)
});

结果

从服务器加载图像时，加载程序图形将自动显示。它将在$http请求完成后停止。

进一步阅读

这是Angular特征请求的interesting discussion，要求“一种方法来检测Angular是否完成了HTML DOM的渲染。”他们通常建议使用$timeout作为解决方法。

检测所有图像何时加载到Angular.js视图中

1 个答案:

资源：ngLoading

步骤分步

结果

进一步阅读