Angular Lazy Load Image Directive

/*Downloaded from https://www.codeseek.co/007design/angular-lazy-load-image-directive-BpPzYw */
img {
  border: 1px solid black;
  margin-bottom: 10px;
  display: block;
  opacity: 0;
}
img.loaded {
  opacity: 1;
}
img.loading {
  opacity: 1;
  transition: opacity linear 2s;
}

/*Downloaded from https://www.codeseek.co/007design/angular-lazy-load-image-directive-BpPzYw */
angular.module('app', [])
.service('lazyLoadQ', ['$q', function($q) {
  let scope = this;
  scope.pending = false;
  let queue = [];
  
  const load = function(o) {
    let q = $q.defer();
    setTimeout(function() {
      const viewportOffset = o.elem[0].getBoundingClientRect();
      if (window.innerHeight + window.scrollY >= viewportOffset.top) {
        o.scope.src = o.attrs.lazyLoad;
        if (o.onload)
          o.elem.addClass('loaded')
        else
          o.elem.addClass('loading');
        o.scope.$apply();
      }
      if (o.elem[0].complete)
        q.resolve();
      else
        load(o).then(q.resolve);
    },0);
    return q.promise;
  };
  
  const process = function() {
    if (queue.length === 0) {
      scope.pending = false;
      return;
    }
    scope.pending = true;
    const o = queue.shift(0);
    load(o).then(function() {
      process();
    })
  };
  
  scope.add = function(s, el, att, onload) {
    // Check the element isn't already in the queue
    for (let a=0; a<queue.length; a++) {
      if (queue[a].elem === el) return;
    }
    queue.push({
      elem: el,
      scope: s,
      attrs: att,
      onload: onload
    });
    
    if (scope.pending) return;
    else process();
  };
  
  angular.element(window).on('scroll resize',process);
  
  return scope;
}])
.directive('lazyLoad', ['$compile', '$interpolate', 'lazyLoadQ', function($compile, $interpolate, lazyLoadQ) {
  return {
    scope: true,
    restrict: 'A',
    compile: function(tElem, tAttrs) {
      const expression = [$interpolate.startSymbol(), 'src', $interpolate.endSymbol()].join('');    
      tElem.attr('data-ng-src', expression);
      tElem.removeAttr('data-lazy-load');
      return function(scope, elem, attrs) {
        $compile(elem)(scope);
        function load(e) {
          if (scope.src)
            angular.element(window).off('resize scroll', load);

          const viewportOffset = elem[0].getBoundingClientRect();
          if (window.innerHeight + window.scrollY >= viewportOffset.top) {
            if (!lazyLoadQ.pending)
              lazyLoadQ.add(scope, elem, attrs, e.type === 'load');
            else
              setTimeout(function() { load(e); },0);
          }
        }
        angular.element(window).on('load scroll resize',load);
      }
    }
  };
}])