Question

我正在使用一个等待angularJs指令完成的加载器。反过来也是如此，如果我的指令首先完成，img加载器必须在我的页面显示之前完成。之后指令将完成执行，我正在使用angular $ timeout

广播一个dom事件

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

我正在使用一个等待所有img加载的jquery插件。

$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

如果我理解你的问题，这应该做的工作：

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

Answer 2

如果您只想在获取数据之前显示一个简单的加载器，您可以通过使用角度方式来实现这一点，代码可能如下所示：

<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.

听取不同元素上的几个触发事件后触发函数

2 个答案: