在不同元素上监听多个触发事件后触发功能

Question

我正在使用一个加载程序，它将等待 angularJs 指令完成。

反之亦然，如果我的指令先完成，img 加载程序必须在我的页面显示之前完成。之后指令将完成执行，我将使用 angular $timeout.

广播一个 dom 事件

$timeout(function() {  
   var DirectivesEnded = new Event('DirectivesEnded');
   document.dispatchEvent(DirectivesEnded);
}, 5000);

我也在使用 jquery 插件等待所有 img 加载。

$images = $("img");
imagesLoaded($images).on('done', function (instance, image) {

});

在两个事件都被触发后，我想执行那些代码行，使加载程序的 html 层消失。

  $(".lazy-load").animate({
    'opacity': 0
  }, 300, "linear", function () {
    setTimeout(function () {
      $(".lazy-load").hide();
    }, 10);
  });

这两个事件和函数都是运行分开的，但我的目标是将它们结合起来。有人知道怎么做吗？

Answer 1

如果您只想在获取数据之前显示一个简单的加载程序，您可以使用 angular 方式简单地实现这一点，代码可能如下所示：

<div ng-show="ctrl.loading" ng-include="'assets/templates/loader.tpl.html'"> Loading ... </div>
<div ng-hide="ctrl.loading">Content</div>

//In controller, set ctrl.loading to false after fetching the data.

Answer 2

如果我很好地理解了你的问题，这应该可以解决问题：

var check_sum = 0;
$timeout(function() {
   var DirectivesEnded = new Event('DirectivesEnded');
   document.dispatchEvent(DirectivesEnded);
   check_sum++;
   finished();
}, 5000);

$images = $("img");
imagesLoaded($images).on('done', function (instance, image) {
    check_sum++;
    finished();
});


function finished() {
  if(check_sum==2) check_sum=0;
  else return;
  $(".lazy-load").animate({
    'opacity': 0
  }, 300, "linear", function () {
    setTimeout(function () {
      $(".lazy-load").hide();
    }, 10);
  });
}

在不同元素上监听多个触发事件后触发功能

trigger function after listening to several triggered events on different elements

javascript

jquery

angularjs

jquery-events