trigger function after listening to several triggered events on different elements

Issue

I'm using a loader that will wait for angularJs directives to be done and finish.

The reverse is exact too, if my directives finish first the img loader must come after before my page will show. After that the directives will finish their execution, I'm broadcasting a dom event using angular $timeout.

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

I'm using too a jquery plugin waiting for all img to load.

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

});

after both event have been triggered I want to execute those lines of code making disappear the html layer of the loader.

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

Both of those events and functions are running separately, but my aim is to combine both of them. Anyone have an idea how to do this?

Solution

If i understood your question well this should do the job:

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);
  });
}

Answered By - Sojtin