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

Detecting when all images have loaded in an Angular.js view

本文关键字：js 视图 加载 图像 何时 检测      更新时间：2023-09-26

我有一个加载的视图，其中包含大量图像（通常在 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'); });

资源： ngLoading

我在Hack Actor的一位好朋友（Mason Hargrove）创建了一个名为ngLoad的Angular指令，你可以将其用于这样的目的。

以下是它的作用：

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

循序渐进

  1. 安装 ngLoad：

    bower install ng-loading --save

  2. 将ngLoading作为依赖项注入主模块：

    angular.module('myApp', ['ngLoading']);

  3. （可选）如果在$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 功能请求的有趣讨论，要求"一种检测 Angular 是否完成了 HTML DOM 渲染的方法"。他们通常建议使用$timeout作为解决方法。

相关文章：